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

最小限必要な設定

　最小限必要とされる設定は、最初の5つの記述だ。これらは罫線の画像のURLと、画像を9分割するときの分割位置を指定している。

-webkit-border-image: url(〜) A B C D

　分割位置を指定する4つの値（A〜D）では、順番に画像の上辺、右辺、下辺、左辺からの位置を指定する。値は数値または割合で指定することが可能で、数値で指定した場合の単位はピクセルとなる。また、割合（%）で指定すると、画像の大きさに対する割合となる。これにより、画像は4つのコーナーと4つの辺、中央部分の9つに分割される。

分割位置の指定

　たとえば、waku.pngという画像を各辺から18ピクセルの位置で9等分したい場合、次のように指定する。

waku.png

分割したい位置

div	{
	-webkit-border-image: url("waku.png") 18 18 18 18;
	}

　この設定を<div&rt;でマークアップしたテキストに適用すると、画像が9つに分割され、枠として表示される。しかし、分割した画像の大きさは無視され、3ピクセル程度の細い罫線として表示されてしまう。図柄がわかるように表示するには罫線の太さを指定しなければならない。

細い罫線として表示された状態

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