CSS3

プロパティ

border-image-width

→●、mdn

ボーダー画像の描画区画幅。

ボーダー画像は、ボーダー画像区画と呼ばれる区画に描かれる。その境界は border-image-outset から決定され、既定ではボーダーボックスに一致する。

border-image-width は、ボーダー画像区画を 9 片に分割するため、区画の各辺から内方へ分割する線までのオフセットを指定する。

一連の成分値は、これら各側からの距離を時計回りに設定する。

<length-percentage[0,∞]> ○

百分率による［横／縦］オフセットは、ボーダー画像区画の［横幅／縦幅］に相対的になる。

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:5mm;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:10mm;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:20%;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:50%;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

<number[0,∞]> ○

実数による値は、対応する border-＊-width の算出値の何倍になるかを表現する。

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:1;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:2;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

auto

auto が指定された場合、ボーダー画像区画の辺部位の線幅は、対応する画像片（border-image-slice を見よ）の生来なサイズ（横幅、縦幅のうち適用可能な方）になる。画像が必要な生来な寸法を有さない場合、対応する border-＊-width の算出値が代わりに利用される。

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:auto;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

開始<DIV style="width:100px; height:70px;
 border:5mm solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-width:2 auto;
 border-image-repeat:round;
 border-image-slice:20;
">テスト</DIV>終了

負な値は無効。

あるオフセット値により、互いに対辺にある 2 つの辺部位が重なり合う場合、border-image-width の使用値は、値を成す すべてのオフセット値を、重なり合わなくなるまで一様な倍率で減量した結果になる ─ 数学的には、［［次の 2 つの値の最小 f］ ＜ 1］ならば、すべてのオフセット値に f を乗算して減量した結果が使用値になる：

テスト