こんにちは。親要素にcssで角丸を適用していた場合、ブラウザーの表示上で角に接して配置される子要素にも角丸を適用しないと、子要素の角が表示されてしまうのでしょうか?
何か親要素だけに角丸を適用していたら、必要に応じて子要素も角丸が適用、または、親要素の角丸でクロップされるような方法というのは存在するのでしょうか?
<div class="wrapper">
<h1 class="wrapper__heading">タイトル</h1>
<p>コンテンツ</p>
</div>
.wrapper {
border-radius:10px;
}
.wrapper__heading {
background: #000000;
/*上の左右角に角丸を設定しないとダメ? */
}
みんなの回答 3 件
子要素にも設定しないと突き破るよ
子要素に背景を入れなければ親要素の角丸が出てくると思うけど。
背景を入れたいなら、子要素にも角丸設定してあげないと当然突き破るよ。
親要素にoverflow:hiddenかければ、中にかけなくてもOKです。
しかしPIEとか使ってるならどうなるかは分かりません。
関連するトピックス