仕様

border-image-width[ <length-percentage[0,∞]> | <number[0,∞]> | auto ]{1,4}
一括/個別個別指定プロパティ
初期値1
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率ボーダー画像領域の幅/高さを基準
計算値それぞれ数値、キーワードauto、または計算された<length-percentage>値の 4つの値
補足<length-percentage> = <length> | <percentage>

border-image-width プロパティは、要素の境界画像の幅を設定する個別指定プロパティです。
非継承プロパティで、初期値は 1 なので、省略時は 1 が指定値となります。

値の数

  1. cdvSample920 > div { padding: 4em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSampleA20">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-width は非継承プロパティであり初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-width: 1em 2em 3em 4em;

値を４つ指定しました。値は 上，右，下，左 で設定されます。

例
  1. border-image-width: 1em 2em 3em;

値を３つ指定しました。値は 上，左右，下 で設定されます。

例
  1. border-image-width: 1em 2em;

値を２つ指定しました。値は 上下，左右 で設定されます。

例
  1. border-image-width: 1em;

値を１つ指定しました。値は 上下左右 で設定されます。

例

<length> 値

  1. cdvSample930 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample930">
  2. <div style="font-size:2em;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-width は非継承プロパティであり初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-width: 1em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. border-image-width: 1.6rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素の font-size の計算値を用います。
(html { font-size: 62.5%; } body { font-size: 1.6em; } で、body からそのまま継承している状態で提示しています。)

例
  1. border-image-width: 16px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。

例
  1. border-image-width: 1vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例

<percentage> 値

ボーダー画像領域の幅/高さを基準にした割合

  1. cdvSample930 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample930">
  2. <div style="width:10em;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-width は非継承プロパティであり初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-width: 20%;
  2. width: 10em;

単位 % の値を指定しました。% は、境界ボックスの対応する寸法に対する割合です。

例

<number> 値

  1. cdvSample930 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample930">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-width は非継承プロパティであり初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-width: 2;

要素の対応する border-width の倍数で指定しました。

例

キーワード

  1. cdvSample930 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample930">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-width は非継承プロパティであり初期値は 1 なので、border-image-width: 1; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-width: auto;

キーワード auto を指定しました。auto は、境界の幅が、対応する border-image-slice の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。

例

CSS全体のキーワード

  1. cdvSample970 > div,
  2. cdvSample970 > div > div { padding: 1em; border: solid 1em; border-image-source: url(./sample.png); border-image-slice: 33%; border-image-outset: 0; border-image-repeat: stretch; }
  3. cdvSample970 > div { border-image-width: 2; }
  1. <div class="cdvSample970">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

Original image
親
子
  1. border-image-width: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-image-width: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-image-width プロパティの初期値は 1 です。

親
子
  1. border-image-width: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-image-width プロパティは非継承プロパティなので初期値の 1 を設定します。

親
子