border-image

仕様

初期値
border-image-source	none
border-image-slice	100%
border-image-width	1
border-image-outset	0
border-image-repeat	stretch
適用対象	すべての要素（border-collapseプロパティの値にcollapseが指定されたtable内要素を除く）
値の継承	しない

設定できる値

スペース区切りで
<使用する画像> <使用範囲> <内側の背景> <繰り返し方法>
を指定する。

<使用範囲>の数値はまとめる事が可能、<内側の背景>は不要であれば省略可、<繰り返し方法>は縦横同じ指定であればまとめる事が可能。

border-image:	url(sample.png)	5 10 15 20	fill	round	stretch
	<使用する画像>	<使用範囲>	<内側の背景>	<繰り返し方法(横)>	<繰り返し方法(縦)>

<上の線>

画像の上を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。

サンプルコード

border-image: url(sample.png) 60 30 30 30 round;
border-width: 30px;

<右の線>

画像の右を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。

サンプルコード

border-image: url(sample.png) 30 60 30 30 round;
border-width: 30px;

<下の線>

画像の下を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。

サンプルコード

border-image: url(sample.png) 30 30 60 30 Round;
border-width: 30px;

<左の線>

画像の左を起点に表示領域を決定します。最大値は画像の大きさ、負の値は指定できません。

サンプルコード

border-image: url(sample.png) 30 30 30 60 stretch;
border-width: 30px;

<内側の背景>

中央部分も破棄されずに、画像が表示されます。

サンプルコード

border-image: url(sample.png) 30 30 30 30 fill stretch;
border-width: 30px;

<繰り返し方法>

横の繰り返しと縦の繰り返しを指定します。同じ指定であればまとめることが可能。

サンプルコード

border-image: url(sample.png) 30 30 30 30 stretch repeat;
border-width: 30px;