CSS | 画像を角丸、円形に表示する方法

2021-11-19CSS 画像,CSS

CSSのborder-radiusプロパティを利用して画像を角丸や円形に表示する方法とシンプルなサンプルコードを紹介しています。

See the Pen CSS | Overlap Images by yochans (@yochans) on CodePen.

※サンプル内の画像はサイズを調節しています。

画像を角丸に表示する方法

CSSでは画像の角を丸くする方法として、その他のHTML要素と同じくborder-radiusを使った方法が有効です。

HTML要素には、画像を表示するimg要素を作成しています。

<img id="image" src="https://1-notes.com/wp-content/uploads/2021/11/ichimatu-moyou.png">

border-radiusはpxやパーセントで丸めるサイズを指定する事が可能です。

#image {
	border-radius: 30px;
}

画像を角丸に表示する方法

パーセント指定の場合、画像の縦横直径に対する割合が適用されます。

正方形の画像を50％を指定すると画像は円形として表示されます。

#image {
	border-radius: 50%;
}

長方形の画像を円形に表示したい場合はコンテナになる正方形の親要素を作成して、overflowプロパティで「hidden」とborder-radiusで50％を指定します。

#container {
	width: 200px;
 	height: 200px;
 	overflow: hidden;
	border-radius: 50%;
}

※本実装時には画像の位置などを調節する必要があります。