1枚の画像からサイズ可変な罫線を表示する（1）：FirefoxとSafariのCSS

　現在のWeb制作では、画像を使ってサイズ可変な罫線を表示する場合、辺やコーナー別に画像を用意して対応する。しかし、画像を作成するのに手間がかかる上に、画像の表示先として複数の要素（タグ）を用意する必要があるなど、HTML/XHTMLソースやスタイルシートの設定が複雑になるという問題がある。

　それに対して、CSS 3ではborder-imageプロパティを利用することにより、1枚の画像からサイズ可変な罫線を表示する方法が提案されている。border-imageプロパティでは、ブラウザが1枚の画像を9つに分割して罫線の表示を行うので、これまでのように制作者が辺やコーナー別に画像を用意する必要がない。また、スタイルシートも<div>などの1つの要素に適用するだけで設定できるというメリットがある。

　Safari 3ではこの機能をサポートしており、-webkit-border-imageというプロパティで利用することができる。たとえば、次のソースではwakublue.pngという1枚の画像から罫線を作成して、テキストを枠で囲んで表示している。

罫線の画像

Safari 3の表示

div	{
	-webkit-border-image: url("wakublue.png") 20 20 20 20 / 20px;
	}

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

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

　ここでは<div>に対して横幅を指定していないので、ブラウザ画面の横幅を変えると枠の大きさも変わる。

ブラウザ画面の横幅を大きくしたもの

　なお、border-imageプロパティはCSS 3の草案「CSS3 Backgrounds and borders Module」で提案されている。現在のところ、Firefox 3やOpera、Internet Explorerでは対応していない。

　では次に、最小限、必要な設定を確認しておこう。