CSS3で角丸

CSS3以前は要素に背景画像を引き何かとちょっとしたところで使いたくても面倒だった角丸の処理ですが、
CSS3簡単な記述で表示が可能です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-border-radius: ○px;

FirefoxなどMozilla系ブラウザに対する記述

-moz-border-radius: ○px;

上記を記述、○pxで角丸のサイズを指定すれば完成です。

角丸のサイズによって以下の表示例一覧のように見え方が変わります。

8pxを指定した角丸

8pxを指定した角丸です。

4pxを指定した角丸

4pxを指定した角丸です。

12pxを指定した角丸

12pxを指定した角丸です。

もちろん対応していないブラウザはまだまだ多いですが、

CSS3でIEでも角丸にする方法

もありますので、状況に応じて今後使っていけるのではと思います。

Tweet