最終更新日:
公開日:
レシピ
画像
画像を角丸にしたり、円形に切り抜く
border-radiusプロパティを使って四角い画像を角丸状態にしたり、丸型に切り抜く方法について解説します。
この記事のポイント
- border-radiusプロパティを使って画像を丸くする
画像の角を丸くする
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;
}
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。