border-image-width：境界線に表示する画像の幅を指定する

border-image-widthプロパティの説明

border-image-widthは、境界線に表示する画像の幅を指定します。対象となる画像は、一枚の画像をborder-image-sliceで分割した仮想のイメージソースです。このプロパティで、それぞれのスライスをどれくらいの幅で表示するのかを決定します。

指定する値は、ボーダー・イメージ・エリア（border image area）と呼ばれる領域の上下左右の端から内側へと移動させるオフセット量です。ボーダー・イメージ・エリアとは、境界線が描画される専有範囲のことで、境界画像はこの縁に沿って配置されます。

border-image-widthに1つの値を指定した場合は、上下左右すべての辺の幅に適用されます。2つの値を指定した場合は、1つ目の値が上下に、2つ目の値が左右に適用されます。3つの値を指定した場合は、1つ目の値が上辺に、2つ目の値が左右に、3つ目の値が下辺に適用されます。そして4つの値を指定すると、上、右、下、左の順に指定された幅が適用されます。

境界画像に関する値を一括で指定する場合は、ショートハンド・プロパティのborder-imageを使用します。境界線に画像が表示されるまでのプロセスは以下の通りです。

1. border-image-sourceで画像を読み込む
2. border-image-sliceで画像を素材として扱えるように分割する
3. border-image-widthで分割された画像を表示する幅が決まる
4. border-image-outsetで境界線の縁からはみ出す距離が決まる
5. border-image-repeatで画像の伸縮や並び方が決まる

border-image-widthに指定できる値

<length>

CSSで使用できる長さを表す単位つきの値です。ピクセルやポイントといった絶対値を表す単位、フォントサイズやビューポートといった相対値を表す単位を指定できます。負の値は使用できません。

<percentage>

オフセット量をパーセンテージで表します。水平軸のオフセットはボーダーイメージエリアの幅、垂直軸のオフセットはボーダーイメージエリアの高さの割合です。負の値は使用できません。

<number>

境界画像の幅を、対応するborder-widthの倍率で指定します。負の値は使用できません。

auto

境界画像の幅を、対応するborder-image-sliceの幅と高さに合わせます。画像が寸法の値を持っていない場合は、border-widthの値が採用されます。

border-image-widthの使い方とサンプル

border-image-widthプロパティの構文は以下の通りです。

/* キーワード値 */
border-image-width: auto;

/* <length>値 */
border-image-width: 10px;
border-image-width: 1rem;

/* <percentage>値 */
border-image-width: 15%;
border-image-width: .6%;

/* <number>値 */
border-image-width: 3;
border-image-width: 16;

/* 上下 | 左右 */
border-image-width: 10px 20px;

/* 上 | 左右 | 下 */
border-image-width: 10px 5% 20px;

/* 上 | 右 | 下 | 左 */
border-image-width: 10px auto 5% .5rem;

/* グローバル値 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: unset;

border-image-widthの実例

それでは実際にborder-image-widthプロパティの書き方を見ていきましょう。ここでは、30pxのひし形で構成された縦横90pxの画像を使います。

今回は、この画像を境界線に表示させて幅の値を変更してみます。border-widthとborder-image-widthの関係性もここで学んで下さい。

単純な<div>を用意し、そこにborderで境界線を与えました。これで境界線が表示される専有幅が得られたことになります。そこにborder-image-sourceで読み込んだ画像を配置し、スライスと繰り返しのパターンを指定すると、上記のように表示されます。

まず、30pxのひし形を30pxに切り取って30pxの境界線に配置していることを確認して下さい。ここにborder-image-widthを追加して表示幅を変更すると、どうなるでしょうか。

境界線に表示されているスライスイメージの幅を15pxに変更しました。この場合、境界線の専有幅は30px確保されたまま、表示されている画像だけが縮小したことになります。更に、画像そのものを縮小するのではなく、スライスされた後の仮想イメージを縮小するため、配置パターンを崩さずに並べることができます。

今度は30pxのスライスイメージを、元の表示サイズよりも大きい40pxに拡大した場合です。ここで注目して欲しいのは、border-widthにあたる数値を変えていないため、境界線の専有幅は変わっていないという点です。つまり、境界画像は、本来の表示可能範囲を超えて余白の領域（パディング・エリア）に侵入していることになるのです。これを示すために、極端な数値に変えてみます。

border-image-widthの値を60pxにしました。これで、30pxで分割したスライスイメージは二倍の大きさで表示されることになります。こうなると、境界画像はパディング・エリアを超えて、コンテンツ・エリアに侵入します。

このように、境界線の専有幅に依存することなく装飾できることがborder-image-widthの強みです。border-widthで決められた範囲に色を塗るborder-colorでは不可能な表現です。

サンプルで紹介した画像は分かりやすく説明するためにタイル状のパターンを使いましたが、角と辺でデザインを変えたり、透過部分を持つ画像を使うことで、バリエーションに富んだ境界線を作り出すことができます。

例えば、上記で示した内容の各プロパティを少し変更するだけで、全く違った見栄えを表現することもできます。これが背景画像を使わずにボーダーだけで表現可能と分かれば、想像力が広がるのではないでしょうか。