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

例

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

結論

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

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

overflow: hidden;

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

よくある間違い

img に border-radius を充ててはいけない

border-radius: 0.75rem;

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

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