ウェブ上に画像を掲載する場合、その画像の形は四角(長方形か正方形)です。でも、画像の角を落として四隅を丸くした状態で画像を表示したいと思うこともありそうです。SNSのプロフィール画像なんかでもよくありますよね。アップロードした画像は四角でも、実際の表示は丸形になっているという例が。

画像の角を丸くしたいときには、わざわざ画像の四隅を透過色で塗ってPNG/GIF形式の画像として作る必要はありません。スタイルシートを使えば、画像側を加工することなく画像の四隅を丸くする(角丸にする)こともできます。

画像の四隅を丸くした表示例

例えば、下記のような川の写真の四隅(角)を丸く表示したいとします。

ちょっとだけ四隅を丸くした例は以下の通りです。

完全に四隅を丸くした場合は以下の通りです。

上記のどちらの例も、画像そのものを加工しているわけではありません。ただスタイルシートを適用することで、画像の四隅を丸く表示させています。

画像の四隅(角)を丸くするためのスタイルシート

画像の四隅を丸くするスタイルシートは、とても簡単です。
ボックスの枠線の角を丸くする際に使うborder-radiusプロパティを、画像(img要素)に対して適用するだけです。

例えば以下のようにCSSソースを記述します。

img {
	border-radius: 30px;
}

このように書くだけで、あらゆる画像の角が「半径30ピクセル」で丸くなります。
もちろん、ウェブページ上のすべての画像の角を一括で丸くしたくはないでしょうから、実際に使う際にはclass名を付加するなり何らかの方法で対象を限定する必要がありますが。

例えば、6個の画像を以下のようなHTMLソースで表示している場合、

<p class="sample1">
	<img src="photo1.jpg" alt="写真1">
	<img src="photo2.jpg" alt="写真2">
	<img src="photo3.jpg" alt="写真3">
</p>
<p class="sample2">
	<img src="photo4.jpg" alt="写真4">
	<img src="photo5.jpg" alt="写真5">
	<img src="photo6.jpg" alt="写真6">
</p>

以下のようにCSSソースを書くことで、画像1～3はちょっとだけ角丸に、画像4～6は完全に(？)側面を丸くできます。

p.sample1 img {
	border-radius: 35px; /* ちょっとだけ角丸 */
}
p.sample2 img {
	border-radius: 130px; /* 大きく角丸 */
}

このように、border-radiusプロパティは、border(枠線)を引いていない場合でも適用可能です。もちろん、borderプロパティを使って枠線を付加すれば、枠線と中身の両方が同じように角丸になります。

備考：画像に枠線を加えた上で、線も画像も四隅(角)を丸くする例

画像に枠線を加えた上で、線と画像の両方の角を丸くすると以下のように見せられます。

なお、画像に枠線を付加する方法については別の記事で解説します。

■関連記事：

• レイアウトに一切影響を与えずに枠線が引けるoutlineプロパティで、動的に枠線を表示
• 画像に枠線を付ける方法
• 画像を円形にくり抜く方法

《2016/04/01 11:07 初版公開》

(更新日：2016年04月01日)