【Tips】border-radiusが内側の要素のせいで効かない場合

<div class="cardList">
  <div class="card">
    <section>
      <h3><img src=""></h3>
      <p>カード型だったり</p>
    <section>
  </div>
  <div class="card">
    <section>
      <h3><img src=""></h3>
      <p>カード型だったり</p>
    <section>
  </div>
</div>

.card section {
  background-color: #efefef;
}

こんな感じでカードを角丸にしたい時、

.card {
  border-radius: 12px;
}

こうするけど、sectionの背景色が強くて角丸になってくれなかったり、h3のimgが角丸になってくれなかったりします。

.card section {
  border-radius: 12px;
}
.card h3 img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

でも問題はありませんが、なんか綺麗じゃないなと思ったら、

.card {
  border-radius: 12px;
  overflow: hidden;
}

でいいみたい。