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

Firefoxの対応

　Firefoxでも、Safari 3と同じように罫線の角を丸く表示することができる。Firefoxではバージョン3以前から対応しており、-moz-border-radiusプロパティを利用する。次のように-webkit-border-radiusと-moz-border-radiusの両方を指定すれば、Safari 3とFirefoxで同じように罫線を角丸で表示することが可能だ。

Safari 3の表示

Firefox 3の表示

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

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

CSS 3における角丸のプロパティ

　罫線の角を丸くするプロパティは、CSS 3では「border-radius」として提案されている。Safari 3の「-webkit-border-radius」や、Firefoxの「-moz-border-radius」はこの規格を先取りしたもので、実験的な対応ということから「-webkit-」や「-moz-」を付けて利用するかたちになっている。

　将来的にCSS 3に対応してくるブラウザまで考慮してスタイルシートを指定する場合には、次のように3つの指定を記述しておくとよいだろう。

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

　ここからは、border-radiusプロパティが提案されているCSS 3の草案「CSS3 Backgrounds and borders Module」を参考に、どのような設定や表示が可能なのかを確認していく。