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

033

CSSで画像を丸く切り抜く方法を備忘録としてご紹介します。

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

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

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

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

四角形の元画像

031

http

丸く切り抜く(デモ1)

上の画像を丸く切り抜き、「border-radius」プロパティを利用します。

031
html

CSS

角丸にする(デモ2)

四隅に、20pxの角丸を設定しました。

031

html

CSS

枠線を付けてみる(デモ3)

円形画像に、グリーンの枠線を付けてみました。

031

html

CSS

2重枠線を付けてみる(デモ4)

円形画像に、2重枠線を付けてみました。

031

html

CSS