プロパティ border-image-width

プロパティ border-image-width は、ボーダーの表示部分の幅を制御し、スケーリングします。この値が border-width よりも大きい場合、ボーダー画像はコンテンツの下に食い込みます。

詳細については、プロパティ border-image を参照してください。

構文

セレクタ {
	border-image-width: CSS単位 | パーセント | 数値 | auto;
}

値

値	説明
CSS単位	指定された CSS単位での値。
パーセント	ボーダーが設定されているブロックのサイズに対するパーセント値。
数値	`border-width` に乗算される数値。
`auto`	キーワード。指定された場合、値は対応する `border-image-slice` の値と等しくなります。適切なサイズがない場合は、`border-width` の値が使用され、画像はコンテンツの下に食い込みながらボーダーの角全体を埋めます。理解を深めるために例を参照してください。

初期値: 1。

例 . 数値

要素にマウスをホバーしたときに border-image-width の値を 2 に設定します。これにより、ボーダーのサイズは 26px*2 - border-width で指定された幅の 2 倍になります。ボーダーはテキストの下（背景のように）食い込みます:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . border-image-repeat を round に変更

前の例では、ホバー時にボーダー内に菱形が整数個収まりません。これを修正するために、 border-image-repeat を値 round に設定します:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . パーセント

要素にマウスをホバーしたときに border-image-width の値を 50% に設定します。これにより、ボーダーのサイズはブロックのサイズの 50% になります（つまり、右側と左側の2つのボーダーがブロック全体を覆います）:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . パーセント

要素にマウスをホバーしたときに border-image-width の値を 30% に設定します。これにより、ボーダーのサイズはブロックのサイズの 30% になります:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . ピクセル

要素にマウスをホバーしたときに border-image-width の値を 50px に設定します:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

例 . 値 auto

要素にマウスをホバーしたときに border-image-width の値を auto に設定します。

ホバー前は border-image-width は値 1 (初期値) を持っています。例では意図的に border-width を 52px に、 border-image-slice を 26 に設定しています (auto の効果は、 border-width が border-image-slice と等しくない場合にのみ観察されます)。 border-image-width が値 1 を持っているため、ボーダー画像は border-width の幅全体、すなわち 52px に引き伸ばされます。ホバー時には border-image-width の値は auto に設定され、画像の幅は border-image-slice の値、つまり 26px と等しくなります:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

プロパティ border-image-width

構文

値

例 . 数値

例 . border-image-repeat を round に変更

例 . パーセント

例 . パーセント

例 . ピクセル

例 . 値 auto

関連項目