【CSS】画像を円形に切り抜く方法

CSSで画像を丸く切り抜く方法を備忘録としてポストします。

企業サイトのトップページや、ECサイトの商品一覧などで、3～4つほどの横並びコンテンツがあり、そこに丸いサムネイル画像を置いているのをために見かけます。

その画像、四角でも全然構わないのですが、丸くしてちょっとだけ目を引く形にしてやろうと言うのが、今回の目的。

なお、画像を作るのが面倒、、、なのではなく、画像を差し替えれば自動的に丸くなってくれるというのを目指し、CSSで円形に切り抜いてみたいと思います。

CSSで画像を丸くする方法

こちらの画像を基本形とします。
ぱくたそさんで見つけたケーキの画像。

丸く切り抜く（デモ1）

先ほどの画像を丸く切り抜きたいと思います。
「border-radius」プロパティを利用します。

ベンダープレフィックは不要とのことなので、これでOKです。

結果。

設定する値は「px」「パーセンテージ」を指定することが出来ます。
今回の場合、300px の画像に対し 150px の円形としているので、

と書き換えることも可能です。

角丸にする（デモ2）

結果。

枠線を付けてみる（デモ3）

結果。

２重枠線を付けてみる（デモ4）

結果。

デモはこちら

参考サイト

-HTML,CSS
-border-radius, 円形, 切り抜き, 画像切り抜き