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

初期値 1
適用対象 全ての要素、::first-letter。ただし、border-collapsecollapseの表を除く。
継承 しない
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

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プロパティの構文は以下の通りです。

CSS
/* キーワード値 */
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-widthborder-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では不可能な表現です。

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

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

表示確認

border-image-widthに関連するCSSプロパティ

ボーダー・アウトライン
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-collapse 表のセル同士が隣接する境界線を共有するか分離するかを指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-spacing 表に含まれるセル同士の間隔を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する