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

　前回、-webkit-border-imageプロパティで1枚の画像を9つに分割して、罫線として表示する方法を紹介した。-webkit-border-imageプロパティは、CSS 3の草案であるCSS3 Backgrounds and borders Moduleで提案されているborder-imageプロパティを、Safari 3が実験的に先行実装したものだ。

　今回は、各辺の画像を繰り返して表示する方法や、背景画像と組み合わせて利用する方法などを紹介していきたい。

　まずは、-webkit-border-imageプロパティを利用して、waku.pngを罫線の画像として指定する。すると、ブラウザによって9つに分割された画像のうち、4つの辺と中央の画像はコンテンツの大きさに合わせて引き伸ばして表示される。

waku.png

Safari 3の表示

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

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

　各辺と中央の画像は、正確にはコンテンツの大きさではなく、パディングボックスの横幅と高さに合わせて引き伸ばされている。パディングボックスはコンテンツ部分にpaddingの余白を含めたボックスのことで、<div>に対してpaddingを指定して罫線の内側に余白を入れると、次のような表示になる。

paddingで20ピクセルの余白を入れたもの

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