border-image-outset プロパティ

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

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

構文

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

例 . 数値

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

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

css#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 外側に移動します。

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

css#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;
}

Результат:

関連項目