CSS 画像を丸く切り抜く方法

clip-path: circle() で画像や要素を円形にトリミングするコードを、実物プレビュー付きでコピーできます。

画像を丸く切り抜くには clip-path: circle(50%) を指定します。要素の短い辺を直径とする正円で切り抜かれ、アバターやアイコンの円形トリミングに使えます。img にも背景画像にも効きます。下にコピペ用コードを用意しました。

円形に切り抜く

CSS

.circle {
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
}

小さめの円（余白をとる）

CSS

.circle-small {
  clip-path: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
}

楕円に切り抜く

CSS

.ellipse {
  clip-path: ellipse(50% 50% at 50% 50%);
  -webkit-clip-path: ellipse(50% 50% at 50% 50%);
}

ポイントと注意点

正円で切るコツ：要素を正方形サイズにし、画像は object-fit: cover を併用すると中身が歪みません。
border-radius との違い：clip-path は要素を実際に切り抜くので、はみ出した子要素も円に沿って切れます。
位置の調整：at 50% 50% を変えると円の中心が移動します。微調整は clip-path ジェネレーターの「円」タイプが便利です。

関連