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

　前回、前々回でブラウザと標準規格の動向を見てきたが、今回からは、Firefox 3やSafari 3が新しく対応したHTML/XHTMLやCSSを紹介していきたい。

　最初に紹介するのは、Safari 3が新しく対応した、罫線の角を丸く表示するスタイルシートだ。角丸のデザインは、Webページではよく利用されているが、現状では画像を使って表現するしかなく、HTML/XHTMLソースも複雑になるといった問題がある。スタイルシートだけで設定する機能は制作者の多くが待望している機能の1つと言えるだろう。現在のところ、Safari 3とFirefoxが対応しているが、OperaやInternet Explorerは対応していない。

-webkit-border-radiusプロパティ

　Safari 3が新しく対応した-webkit-border-radiusプロパティでは、半径を指定することで罫線の角を丸く表示する。たとえば、<div>に対して角の半径を「20px」と指定すると、次のように4つの角が丸く表示される。なお、<div>には太さ5ピクセルの青色の罫線を指定して、背景を水色で表示するように指定している。

Safari 3の表示

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

<div>
今日はいい天気です。今日はいい天気です。今日はいい天気です。
</div>

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

　上のサンプルでは、paddingプロパティで罫線の内側に20ピクセルの余白を入れているが、余白を入れずに罫線の角を丸くした場合、次のように文字がはみ出して表示される。

Safari 3の表示

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

<div>
今日はいい天気です。今日はいい天気です。今日はいい天気です。
</div>

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