レシピ

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

  • このエントリーをはてなブックマークに追加

四角い画像を角丸状態にしたり、丸型に切り抜く方法について解説します。

この記事のポイント

  • border-raidusプロパティを使って画像を丸くする

画像の角を丸くする

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;
}

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ