CSS：border-radiusで子要素の角が丸くならない問題

ボックスの角を丸くするのに使うプロパティは皆さんご存じborder-radiusです。

けど時々、「あれっ？角丸にならないぞ？」ってなることがあるかもしれません。ありますよね。

具体的な例を出すと、

画像（img）を角丸にしようと思って、でもimg自体にスタイルをつけるのは嫌だからimgを包む親要素にborder-radiusをつけたとき。

<div class="box"> 
  <img src="gazo.jpg" alt="画像">
</div>

.box{ 
  border-radius: 20px;
}

これでうまくいきそうな気がするじゃないですか

いきません。

解決法

overflow: hidden;を書いてあげましょう。
実際は、.box（親要素）は角丸になっているものの、子要素が角丸になっていないだけです。
角丸の形に切り抜いてあげましょう。

.box{ 
  border-radius: 20px;
  overflow: hidden;
}

ばっちり！