CSSで罫線を角丸で表示する（2）：FirefoxとSafariのCSS

角ごとの半径をまとめて指定する場合

　現在のCSS 3の草案では、角ごとの半径を1つのプロパティでまとめて指定する方法は提案されていない。1つのプロパティに複数の値を指定すると、楕円の指定と区別できなくなるためだ。楕円の角丸の指定方法については、前回の記事を参照してほしい。

　しかし、Firefoxでは楕円の指定に対応していない代わりに、-moz-border-radiusプロパティで角ごとの半径をまとめて指定することができる。指定方法は、marginやpaddingプロパティで上下左右の余白をまとめて指定する場合と同じで、左上の角の半径から順に時計回りで値を指定していく。Safari 3はこの記述方法には対応していない。

Safari 3の表示

Firefox 3の表示

div	{
	-moz-border-radius: 10px 20px 30px 40px;
	border: solid 5px red;
	background-color: orange;
	padding: 20px;
	width: 100px;
	}

※ブラウザで表示を確認する

　なお、CSS3 Backgrounds and borders Moduleの最新のEditor's Draft（2007年12月25日リリース）では、CSS 3においても次のような形で角ごとの半径をまとめて指定する方法が提案されている。

border-radius: 水平方向の半径 / 垂直方向の半径

　この記述形式であれば、角を楕円で表示することも、角ごとの半径をまとめて指定することもできるようになる。たとえば、次の2つのソースでは、同じ楕円形の角丸を指定したことになる。

border-radius: 10px 20px 30px 40px / 5px

border-top-left-radius: 10px 5px;
border-top-right-radius: 20px 5px;
border-bottom-right-radius: 30px 5px;
border-bottom-left-radius: 40px 5px

　角を楕円にする必要がなければ次のように4つの角の半径を指定することができるので、Safari 3の-webkit-border-radiusよりも、Firefox 3の-moz-border-radiusの動作がより近いことになる。

border-radius: 10px 20px 30px 40px

　なお、この記述形式はEditor's Draftで提案されているものなので、正式な草案（Working Draft）で本採用になるかどうか、今後の動向に注目したい。