[:a]CSSだけで画像を角丸にする方法♪


 この記事のタイトルとURLをコピーする

いまさらですがHTML5+CSS3って便利ですよね。

便利というか進化して、今まで苦労していたデザインが簡単に実現できるようになったりしています。

その中でも私の大好きなCSSの一つ、「角丸」デザインです。
とにかく角を丸っこくするだけで可愛いヾ(´▽`)ノ
自分のブログではやってなかったので、さっそく画像を丸ってしたのでその方法をシェアします!

CSSだけで画像を角丸にする

ではコードとサンプルの紹介です。

コード

スポンサーリンク
[css] .kadomaru img{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; /* Firefox用 */
}
[/css]

画像を角丸にする場合は「.kadomaru img{….}」のように「img」に対して指定してあげてください。
画像じゃなくてもdivなどの背景も角丸にできます♪

角丸10pxの場合

子猫の写真

角丸15pxの場合

遊ぶ子猫

角丸20pxの場合

遊ぶ子猫

角丸50pxの場合

遊ぶ子猫

角丸100pxの場合

遊ぶ子猫

100pxになると正方形の場合は正円になります♪

akane

\この記事をシェア/

ABOUTこの記事をかいた人

フリーランスクリエイター。 愛媛出身→岡山→大阪→横浜→兵庫(現在) 主にWebデザインやWeb担当業務、作品販売、プロジェクトの裏方などの仕事をしています。 情報集めや新しいものが大好き! 「楽しく生きる」をモットーに、便利ツール紹介やコラムなどを書いています。