CSS

"border-image-width" is a CSS property used to specify a border image and set the width of the border.

border-image-width

　border-image-widthプロパティは、要素のボーダーに画像を使用するときに、画像の幅を指定するために使用されます。

　基本構文は以下の通りです。

CSS

border-image-width: <value> | <value> <value> | <value> <value> <value> <value>;

　このプロパティには、単一の値、2つの値、4つの値のいずれかを指定できます。それぞれの意味について説明します。

単一の値: この場合、値はボーダーの全体の幅を指定します。例えば、border-image-width: 10px;は、4つの辺すべてのボーダーの幅が 10ピクセルであることを意味します。
2つの値: この場合、最初の値は水平方向のボーダーの幅を指定し、2番目の値は垂直方向のボーダーの幅を指定します。例えば、border-image-width: 10px 20px;は、左右のボーダーが 10ピクセル、上下のボーダーが 20ピクセルであることを意味します。
4つの値: この場合、それぞれの値は上下左右の順番で、それぞれのボーダーの幅を指定します。例えば、border-image-width: 10px 20px 30px 40px;は、上が 10ピクセル、右が 20ピクセル、下が 30ピクセル、左が 40ピクセルのボーダーを持つことを意味します。

　値は、絶対値、相対値、パーセンテージなど、CSSで使用できる他の単位と同様に指定できます。ボーダーの幅が指定されていない場合は、デフォルトで 1になります。

　例えば、以下のCSSは、画像 border.png を使用して、要素のボーダーを作成し、その幅を 20ピクセルに設定します。

CSS

div {
	border-image: url(border.png) 30 round;
	border-image-width: 20px;
}

　このコードは、4つの辺すべてに 20ピクセルの幅を持つ、丸みを帯びた border.png 画像で要素を囲むボーダーを作成します。

　注意点としては、border-imageプロパティが指定されていない場合、border-image-widthは適用されません。また、border-image-widthが指定されている場合は、border-image-outset、border-image-repeat、border-image-sliceのプロパティも使用する必要があります。

border-image-outset: ボーダー画像の外側の幅を指定します。このプロパティは、ボーダー画像が指定された場合のみ適用されます。
border-image-repeat: ボーダー画像の繰り返し方法を指定します。値には、stretch（伸縮）、repeat（繰り返し）、round（繰り返しできるだけ拡大）のいずれかを指定できます。
border-image-slice: ボーダー画像のどの部分を使用するかを指定します。値には、単一の値、2つの値、4つの値のいずれかを指定できます。それぞれの値は、左上、右下、右上、左下の順で、画像のスライスの境界線を指定します。値が単一である場合、4つの値は同じになります。

　以下は、すべてのプロパティを使用した例です。

CSS

div {
	border-image: url(border.png) 30 round;
	border-image-width: 20px;
	border-image-outset: 10px;
	border-image-repeat: round;
	border-image-slice: 10% 20% 30% 40%;
}

　このコードは、画像 border.png を使用して、要素のボーダーを作成します。幅は 20ピクセル、外側の余白は 10ピクセル、繰り返し方法は繰り返しできるだけ拡大、スライスの境界線は左上 10％、右上 20％、右下 30％、左下 40％に設定されます。

　このプロパティを使用することで、ボーダーに画像を簡単に適用することができます。