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

楕円形の角丸

　CSS 3のborder-radiusでは、水平方向と垂直方向の半径を別々に指定することで、罫線の角を楕円形で表示できることになっている。楕円形で表示する場合、次のように半角スペースで区切って2つの値を記述して、1つ目の値で水平方向の半径、2つ目の値で垂直方向の半径を指定する。

border-radius: 40px 20px

　Safari 3はこの記述に対応しており、罫線の角を楕円形で表示することができる。次のように指定した場合、水平方向の半径は40ピクセル、垂直方向の半径は20ピクセルで表示される。一方、Firefox 3は楕円形の表示には対応しておらず、1つ目の値は左上と右下の角の半径、2つ目の値は右上と左下の角の半径として処理される。

Safari 3の表示

Firefox 3の表示

div	{
	-webkit-border-radius: 40px 20px;
	-moz-border-radius: 40px 20px;
	border: solid 5px blue;
	background-color: skyblue;
	padding: 20px;
	width: 100px;
	}

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