画像を角丸にしたり、円形に切り抜く

画像の角を丸くする

img要素に対してborder-radiusプロパティを適用すると、画像の角を丸くて様々なデザインに対応できるようになります。

左から1つ目は通常の画像表示、2つ目はやや角丸、3つ目は丸型に切り抜いたように見せています。

HTML コード例

<figure class="pic1"><img src="./images/pic_thumb2.jpg"></figure>
<figure class="pic2"><img src="./images/pic_thumb2.jpg"></figure>
<figure class="pic3"><img src="./images/pic_thumb2.jpg"></figure>

CSS コード例

figure {
  width: 180px;
}
.pic1 img {
  /* 角丸の指定なし */
}
.pic2 img {
  border-radius: 20px;
}
.pic3 img {
  border-radius: 90px;
}

画像の幅は親要素のfigure要素に指定している「180px」ですが、その半分以上のサイズを指定すると辺がなくなって完全に丸い形で表示されます。

border-radiusプロパティは4つの角を個別に指定することができるので、次のような左上と右下の角だけ丸くすることもできます。

CSS コード例

.pic4 img {
  border-radius: 40px 0 40px 0;
}