プロフィール画像やサムネイルを丸く切り抜くCSS border-radiusコピペ版 - [k]id東京都世田谷区　ホームページ制作　[k]id

サムネイルを丸く切り取りたい

当ブログのプロフィール欄では四角い写真をCSSにて丸く切り抜いています。

2015年5月時点ではIE8のシェアがだいぶ低くなり、
border-radiusがだいぶ使いやすくなってきました。

CSSで画像を丸く切り抜く方法

CSSで画像を丸く切り抜くにはborder-radiusを使用します。
border-radiusを下記のように画像の半分のサイズに指定することで、丸く切り抜く事ができます。

１、正方形の画像を用意します。

２、CSSの設定

下記のCSSを参考に画像のサイズの半分の値にborder-radiusを設定します。

コピペ用コード

img{
width:100px; /*画像のサイズを100%*/
border-radius: 50px; /*画像のサイズの半分のサイズを指定*/
}

３、完成！

下記のように丸く切り抜けると思います。