2021-11-30

border-radiusスタイルで子要素の角を丸くする

要素の角を丸める際によく使用するborder-radius。
画像の角を丸め、デザインとして表示することもよくあります。

画像(img要素)に直接スタイルをあてれば早いのですが、親要素に丸みをもたせ、子要素に適用したいというのが一般的ではないでしょうか。

下記のように、画像を包含する親要素にborder-radiusを指定しても、画像要素には適用されません。

HTML

<div class="column">
    <img src="photo.jpg">
</div>

CSS

.column {
    border-radius: 20px;
}

解決方法

親要素にoverflow: hidden;を指定します。
一言で言うなら、はみ出した部分を非表示にするという指定です。(マスクをするようなイメージ)

CSS

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

overflow: hidden;を指定しないでも、親要素.columnには角丸の指定(border-radius)が指定され、角が丸くスタイルされています。

子要素の画像が角丸の枠をはみ出して表示されていた状態に対して、はみ出した部分を隠す指定を追加した、といった感じでしょうか。