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

罫線の太さの指定

　罫線の太さの指定は、-webkit-border-imageプロパティのオプションとして、分割位置の指定の後に記述できる。このとき、分割位置の指定とオプションの間は「/（バックスラッシュ）」で区切るようにする。

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

　罫線の太さの値は、border-widthプロパティの値と同じ形で指定することができる。次のように18pxと指定すると、4つの各辺は18ピクセルの太さで表示される。

罫線を18ピクセルで表示したもの

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

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

　辺ごとに太さを変えることも可能だ。次のように指定すると、上辺を10ピクセル、右辺を20ピクセル、下辺を30ピクセル、左辺を40ピクセルで表示する。

辺ごとに罫線の太さを変えて表示したもの

div	{
	-webkit-border-image: url("waku.png") 18 18 18 18 / 10px 20px 30px 40px;
	}

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

　また、-webkit-border-imageプロパティのオプションを使用せず、border-widthプロパティで指定することもできる。ここでは、太さを30ピクセルに指定している。

border-widthで太さを指定したもの

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

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

　なお、こうして表示を確認すると、9つに分割した画像のうち、4つの辺と中央の画像はコンテンツの横幅と高さに合わせて引き伸ばされていることがわかる。-webkit-border-imageプロパティでは、これらを引き伸ばさずに、繰り返しタイリングして表示するように指定することも可能だ。詳しくは、次回に紹介したいと思う。