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

プロフィール画像やサムネイルを丸く切り抜くCSS border-radiusコピペ版

Category CSS Update 2015.06.01

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

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

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

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

circle2

対応ブラウザ

IE 9+
Firefox
Google Chrome
Safari 5

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

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

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

circle

2、CSSの設定

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

コピペ用コード

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

circle3

3、完成!

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

circle2

ページトップへ