border-radius

まず最初はborder-radiusの紹介。
画像を使わずに角丸を表現することができるプロパティです。
Safari・Google Chrome・Firefox3.05～で先行実装されています。

このサイトで使っている箇所。左が対応ブラウザ、右が未対応ブラウザでの見た目

今まで画像やJavaScriptを使って表現していた角丸をCSSの指定だけで表現することができるようになり、かなり便利です。スライスをするためにPhotoshopのレイヤーを消したり出したりしながらスライスをしなくてもよくなる、ということだけでもかなりの時間短縮になります。
そのうち紹介しようと思っているbox-shadowと合わせて使うことでドロップシャドウのついた角丸のボックスもCSSだけで表現できるようになります。

現時点ではベンダープリフィックスをつけて使用しなければならないのですが、先行実装ということでFirefoxとWebKitでプロパティの指定が微妙に異なります。

WebKit（Safari/Google Chrome）の場合

WebKitはW3Cの草案に記載されているものに対応しています。楕円の指定も可能です。
使用する際にはWebKitのベンダープリフィックス「-webkit-」をつける必要があります。

border-radius: <length> <length>?

一括で4つの角の半径を指定。半径を2つ指定した場合、最初の数値が水平方向、2個目の数値が垂直方向の半径になります。

border-top-right-radius: <length> <length>?

右上の半径を指定。

border-top-left-radius: <length> <length>?

左上の半径を指定

border-bottom-right-radius: <length> <length>?

右下の半径を指定。

border-bottom-left-radius: <length> <length>?

左下の半径を指定。

• Webkitの角丸サンプル
• WebKitの角丸サンプル（楕円）

Firefoxの場合

Firefoxの場合はMozillaの独自拡張が含まれるため、プロパティの命名規則がWebKitのものと異なります。Firefox3.5で確認したところ楕円の指定もできました。
使用する際にはMozillaのベンダープリフィックス「-moz-」をつける必要があります。

-moz-border-radius: <length>{1,4}

一括指定。
[2値の場合]最初が左上・右下、次が右上・左下の半径になります。
[3値の場合]左上、右上・左下、右下の順
[4値の場合]左上、右上、右下、左下の順

-moz-border-radius-topright: <length> <length>?

右上の半径を指定。

-moz-border-radius-topleft: <length> <length>?

左上の半径を指定。

-moz-border-radius-bottomright: <length> <length>?

右下の半径を指定。

-moz-border-radius-bottomleft: <length> <length>?

左下の半径を指定。

• Firefoxの角丸サンプル
• Firefoxの角丸サンプル（楕円）