border-radiusをかけた親要素から子要素がはみ出ないようにする

2023年2月4日

本ページにはプロモーションが含まれる場合があります

外側のボックス(親要素)にborder-radiusを設定しても、中のimgなどの子要素がはみ出てしまう問題を解決します。
親要素にoverflow: hidden;を設定するだけなのでとても簡単です。

DEMO

こちらは子要素がはみ出ています。

こちらは子要素が親要素のborder-radiusの影響を受けています。

HTML

<div class="flex">
  <div class="item">
    <p>こちらは子要素がはみ出ています。</p>
    <a href="#" class="button-01">more</a>
  </div>
  <div class="item overflow">
    <p>こちらは子要素が親要素のborder-radiusの影響を受けています。</p>
    <a href="#" class="button-01">more</a>
  </div>
</div>

CSS

.item {
  border-radius: 30px;
}

.item.overflow {
  overflow: hidden;
}

overflow: hidden;で親要素の領域からはみ出さないようにしています。