border-image-outset プロパティ

border-image-outset プロパティは、ボーダーを要素の外側に移動させることができます。値として単位を指定しない数値、またはパーセントを除く任意のサイズ単位を指定できます。単位を指定しない数値を指定した場合、それは border-width プロパティの値に乗算される乗数となります。負の値はサポートされていません。

ボーダー画像に関する詳細な情報については、border-image プロパティを参照してください。

構文

セレクタ {
	border-image-outset: 正の数;
}

例 . 数値

要素にマウスを乗せたときに、border-image-outset の値を 3 に設定します。これにより、ボーダーは border-width で指定されたその幅（26px*3）の 3 倍外側に移動します。

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

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

例 . ピクセル

要素にマウスを乗せたときに、border-image-outset の値を 30px に設定します。これにより、ボーダーは 30px 外側に移動します。

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

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

border-image-outset プロパティ

構文

例 . 数値

例 . ピクセル

関連項目