🔨

CSSのborder-radiusで子要素がはみ出す

2022/08/11に公開


上記のように、親要素にborder-radiusが指定されているものの、子要素のimgがはみ出してしまい、結果として左側だけ角張ってしまっています。

結論

こういったケースでは、子要素が親要素をはみ出していると考えます。
はみ出すといえば、overflowですね。

すなわち、親要素に以下のスタイルを充てます。

overflow: hidden;

すると、以下のように意図したデザインになります。

よくある間違い

imgborder-radius を充ててはいけない

border-radius: 0.75rem;

imgに対して上記のスタイルを充てれば解決!と考えてしまいがちですが、実際にやってみると以下のようになります。

このように、img右側も丸まってしまいます。
「丸めたい」という気持ちが先走りして、つい子要素に目が行きがちです。あくまで、親要素に対してスタイルを充てるという点に注意しましょう。

GitHubで編集を提案

Discussion