border-radiusを使用した場合は内側の要素にも付けなければいけないことがある

content_border

背景色が角丸に重なる

border-radiusで角丸を適用すると内側の要素が密着していて背景色が適用されている場合、背景色が内側に重なって角丸部分がにじんだように表示されることがある。これを防ぐためには背景色が適用されている内側の要素にもborder-radiusを適用する必要がある。

背景色が角丸に重なるサンプル

角丸に重ならないようにしたサンプル

カテゴリーcss