CSSで画像を丸く切り抜く（border-radius）

2025/06/262025/06/27

丸いアイコンやプロフィール画像に便利

画像や要素を丸く表示するには、CSSの border-radius プロパティで簡単に表現できます。
円形や楕円の形に切り抜くことで、デザインにやわらかさや親しみやすさを加えることができます。


.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.circle {

border-radius: 50%;

width: 100px;

height: 100px;

overflow: hidden;

}


<img src="sample.jpg" class="circle" alt="丸い画像">

widthとheightが同じ値でないと真円になりません。
overflow: hiddenで画像のはみ出しを防止しています。

よかったらシェアしてね！