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

いまさらですが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