Q&A
「角丸に合わせる」とは具体的にどのような状態でしょうか。図にするなどして説明を追加してください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<link rel="stylesheet" type="text/css" href="sample.css"> 4 5<head> 6 <meta charset="utf-8"> 7 8 <title>質問用</title> 9</head> 10 11<body> 12 <div id="View1"> 13 <h2>Sample</h2> 14 </div> 15 16</body> 17</html>
CSS
1body { 2 margin: 0px; 3 border: 0px; 4 padding: 0px; 5 background-color: #103479; 6} 7 8div#View1 { 9 text-align: center; 10 margin: auto; 11 height: 100px; 12 width: 200px; 13 border-radius: 15px; 14 border: 1px #FF8C00 solid; 15 background-color: #F5F5DC; 16} 17 18div#View1 h2{ 19 font-size: 20px; 20 margin: 0; 21 background-color: #7FFF00; 22} 23
説明不足ですみません、background-colorが角丸よりはみ出してしまうので直したいということです。
CODEISLEさんの回答がわかりやすかったのでそちらを採用しました。
失礼しました。
回答1件
0
ベストアンサー
div#View1 に overflow:hidden; を追加
もしくは
div#View1 h2 に border-radius:15px 15px 0 0; を追加
で h2 の背景色が角丸からはみ出してしまうのを防げます。
投稿2018/12/17 23:57
総合スコア251
あなたの回答
tips
プレビュー
