【CSS3】border-radiusの使い方を徹底的に学んでみる

備忘録です。 この記事を見ている人に説明は不要かと思いますが、border-radiusというのは要素の輪郭（border）を丸めるプロパティです。画像を使わずにリッチな表現が可能になるので、最近は色々なところで使われています。

適当なSample

横300px、縦120pxのdiv要素に、背景色とborder-radius:16pxを指定してみました。 こんな感じになります。
それではまず、border-radiusの仕組みを見てみましょう。

border-radiusの仕組み

border-radius: 16pxを指定した時、ブラウザはこんな感じで解釈しています。 指定した値を半径に取った円が、角にくっついているようなイメージです。
また、水平方向と垂直方向で半径を変えることも出来ます。（後述）

角ごとに違う値をセットしてみる

角には「左上」「右上」「右下」「左下」の4つがありますが、それぞれに別の値をセットすることができます。 また、％で指定することも出来ます。水平方向、垂直方向のどちらにも適切な値が入るので、全ての値を100%にすると滑らかな円が作れます。 marginやpaddingのように、省略して記述することも可能です。 上手く活用すれば、こんな感じのタブっぽいものが作れたりします。

水平方向、垂直方向の丸みを調整する

水平方向と垂直方向で別々の値をセットするには /（スラッシュ）を使います。
これも角ごとに設定、及び省略した記述が可能です。

ベンダープレフィックスについて

個人的に、border-radiusにベンダープレフィックスはいらないと思っています。
最新のFirefoxやChrome、IE9～10等のブラウザは、既にベンダープレフィックス無しのborder-radiusに対応しています。 それどころか、ベンダー(略)付きだと認識されません。

また、IE8等のレガシーブラウザだとborder-radiusが効きませんが、別に角が丸かろうが尖ってようが使い勝手に支障は無いのでスルー。
どうしても気になる人は「CSS3PIE」とか使えばいいんじゃないかな。

以上、管理人@LeoTiger_7の備忘録でした。