2013年02月27日 category : Web tags :

ボーダー以外にも適用できる!CSSで画像の角を丸くする方法

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

kadomaru

”ボーダー以外にも適用可能なimgタグで挿入した画像の角を丸くする方法です。角丸です。”

CSSだけでイメージ画像の角を丸くする方法です(角丸)。ほんのすこし前まで角を丸くするには画像の加工なんかしてたのですが、今はCSSだけでも角をとることが可能です。

私的備忘録的なエントリーになってしまいますが、画像と合わせて進めていきますので数値と実際の表示の感じのサンプルとして御覧ください。なお、本日手元にIEがないのでFirefox、Chromeのみの確認となっています。

01 . HTMLとCSS

まずはHTML。imgタグをdivで括ります。

<div class="image">
	<img src="xxxx.jpg" title="">
</div>

お次はCSS。

.image img{
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

以上です。あとは数値を変更していけばOK。元画像はこちら

02 . 10px

03 . 30px

04 . 50px

05 . 100px

最後はサークル型の画像に早変わりです。円になったので100px以上に数値をあげても円のままです。サークルかわいいですね。

HOME >>  Web > ボーダー以外にも適用できる!CSSで画像の角を丸くする方法