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

角ごとに半径を変える場合

　4つの角ごとに半径を変えて表示することも可能だ。その場合、CSS 3では次のプロパティを利用して半径を指定する仕組みになっている。

• border-top-left-radius（左上の半径を指定）
• border-top-right-radius（右上の半径を指定）
• border-bottom-right-radius（右下の半径を指定）
• border-bottom-left-radius（左下の半径を指定）

　Safari 3では、CSS 3のプロパティに「-webkit-」を付けたプロパティをサポートしている。

• -webkit-border-top-left-radius（左上の半径を指定）
• -webkit-border-top-right-radius（右上の半径を指定）
• -webkit-border-bottom-right-radius（右下の半径を指定）
• -webkit-border-bottom-left-radius（左上の半径を指定）

　一方、Firefoxでは次のようにプロパティを記述する。CSS 3のプロパティに「-moz-」を付けたものではないので注意したい。

• -moz-border-radius-topleft（左上の半径を指定）
• -moz-border-radius-topright（右上の半径を指定）
• -moz-border-radius-bottomright（右下の半径を指定）
• -moz-border-radius-bottomleft（左下の半径を指定）

　たとえば、4つの角をそれぞれ、左上を10ピクセル、右上を20ピクセル、右下を30ピクセル、左下を30ピクセルと指定すると、次のような表示になる。

Safari 3の表示

Firefox 3の表示

div	{
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 40px;

	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 40px;

	border: solid 5px red;
	background-color: orange;
	padding: 20px;
	width: 100px;
	}

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