CSS3のborder-radiusを使って枠線の角丸を表現する

CSS3のプロパティ「radius」を使ってborderの角丸を表現する方法です。

基本設定

以下のようにCSSで設定することで、borderで指定した枠線を角丸で表現することができます。

border: 3px solid blue;
border-radius: 10px;

1ピクセルで青の枠線の角を10pxの度合いで曲線で表現します。以下に実際の組み込み例を示します。
※もちろんIE8以下など対応していないブラウザでは閲覧できません。

みさなまお使いのブラウザでは角が丸く表示されているでしょうか。

少し前まで、「border-radius」はCSS3の草案で、表現できるブラウザは存在していませんでしたが、Firefox5.0、Google Chrome 12では問題なく表示されているようです。
それまではGoogle ChromeとSafariでは「-webkit-border-radius」、Firefoxでは「-moz-border-radius」が用意されていましたが、近い将来「border-radius」に統一されるでしょう。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

ちなみにIE8以下は対応していないので、見比べるとその効果を確認することができます。

４つの角丸を個別で指定する

上のように一括で角丸を装飾することもできますが、各々を別指定することもできます。
以下、実装例です。

また、以下のようにまとめて指定もできます。順に左上、右上、右下、左下の値を指定します。

バラバラに指定することなんかほとんどないと思いますが、アイディア次第ではおもしろいことができるかもしれません。

角丸の曲線を細かく設定する

以下のようにしてスラッシュ「/」で区切ることで、角丸の水平方向と垂直方向の度合いを調整することができます。
文章だと説明が難しいので、少し極端な例を示します。

左上の角丸が水平方向に長く曲がっているのが分かるでしょうか。

これらを活用すれば、角丸の表現に限らず、楕円のボタンや、卵のように片方が尖ったボックスも画像なしで表現できそうですね。