🔨
CSSのborder-radiusで子要素がはみ出す
例
上記のように、親要素にborder-radius
が指定されているものの、子要素のimg
がはみ出してしまい、結果として左側だけ角張ってしまっています。
結論
こういったケースでは、子要素が親要素をはみ出していると考えます。
はみ出すといえば、overflow
ですね。
すなわち、親要素に以下のスタイルを充てます。
overflow: hidden;
すると、以下のように意図したデザインになります。
よくある間違い
img
に border-radius
を充ててはいけない
border-radius: 0.75rem;
img
に対して上記のスタイルを充てれば解決!と考えてしまいがちですが、実際にやってみると以下のようになります。
このように、img
の右側も丸まってしまいます。
「丸めたい」という気持ちが先走りして、つい子要素に目が行きがちです。あくまで、親要素に対してスタイルを充てるという点に注意しましょう。
Discussion