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

各辺と中央の画像の表示方法

　-webkit-border-imageプロパティのオプションを利用すると、各辺と中央の画像を引き伸ばして表示するのか、繰り返し表示するのかを指定することができる。オプションは罫線の太さの指定（border-width）の後に、次のような形でスペースで区切って指定する。

-webkit-border-image: url(〜) A B C D / border-width topbottom leftright

　各辺の表示方法で指定できる値は、「repeat」「stretch」「round」の3種類となっている。各辺の画像を繰り返して表示するためには、次のように「repeat」と指定する。

各辺の画像を繰り返して表示したもの

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

　「stretch」と指定すると、標準の場合と同じように各辺の画像はパディングボックスに合わせて伸縮して表示される。

各辺の画像を伸縮して表示したもの

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

　上下の辺と左右の辺で、表示方法を変えることも可能だ。次のように指定すると、上下の辺は繰り返し、左右の辺は伸縮して表示される。

上下と左右の辺で表示方法を変えたもの

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

　なお、「round」と指定した場合、各辺の画像は「repeat」と同じように繰り返し表示される。ただし、繰り返し表示した画像がパディングボックスの横幅や高さとぴったり一致せず、画像が途中で切れてしまう場合、画像の横幅を少し縮小して繰り返し表示を行い、画像が切れないように表示することになっている。しかし、Safari 3では「repeat」と同じ表示になってしまう。

表示方法を「round」と指定したもの。「repeat」と同じ表示になっている

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