CSSのborder-radiusを使う時、ボタンや画像の角を丸くすることもあれば、中にいろいろ要素の詰まったカードの角を丸くしたいことありますよね。
全ての要素が中央部に密集していればいいのですが、ちょっと背景を塗り替えたり、縁にぴったりくっついた見出しをデザインしたい時、親要素にborder-radiusを指定していても、子要素がはみ出してしまうんですよね。

親要素にborder-radiusを付けても子要素がはみ出る

以下のサンプルを見てください。

1番目のサンプルは親要素にのみborder-radiusを設定しています。
子要素が普通にはみ出していますね。
これでは理想のスタイルにはなりません。
そこで2番目のサンプルです。

子要素にもborder-radiusを適応する

愚直に子要素のはみ出した部分をborder-radiusの中に収めようとすると、見出し部分にもborder-top-left-radiusとborder-top-right-radiusを指定する必要があります。

しかし、ちょっと待て！
この実装はなんだかダサい。もっと綺麗な方法があるはずだ！

overflow:hidden;はborder-radiusで丸めた部分にも適応される！

私はoverflow:hidden;は要素の四角い部分に適応されるものと勝手に思い込んでいました。
が、border-radiusとoverflowを組み合わせると、border-radiusで丸めた部分からはみ出した部分も簡単にカードの角を丸めることが出来ました。