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

　前回に引き続き、罫線の角を丸く表示するスタイルシートの機能を見ていきたいと思う。

　罫線の角丸は、CSS 3の草案「CSS3 Backgrounds and borders Module」で提案されたborder-radiusプロパティで設定することができる。現在のところ、Safari 3では-webkit-border-radius、Firefoxでは-moz-border-radiusプロパティで指定するようになっている。

罫線の種類を変えた場合

　CSS 3では、どのような種類の罫線で表示した場合でも、罫線はカーブに沿って表示するとされている。そこで、罫線の種類を変えて角丸を表示してみると、Safari 3とFirefox 3では次のような表示になる。Safari 3ではすべての罫線がカーブに沿って表示されているが、Firefox 3では罫線の種類が「dotted」と「dashed」の場合、カーブ部分が実線になっていることがわかる。

Safari 3の表示

Firefox 3の表示

　ここではスタイルシートを次のように指定して、border-styleプロパティで罫線の種類を変えて表示している。罫線の種類の違いをわかりやすくするため、角丸の半径は40ピクセル、罫線の太さは10ピクセルに指定した。

div	{
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-style: 〜;
	border-width: 10px;
	border-color: red;
	background-color: orange;
	width: 100px;
	}

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