border-image-width:境界線に表示する画像の幅を指定する
初期値 | 1 |
適用対象 | 全ての要素、::first-letter 。ただし、border-collapse がcollapse の表を除く。 |
継承 | しない |
アニメーション | 計算値の型による |
対応ブラウザ | 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
を使用します。境界線に画像が表示されるまでのプロセスは以下の通りです。
border-image-source
で画像を読み込むborder-image-slice
で画像を素材として扱えるように分割するborder-image-width
で分割された画像を表示する幅が決まるborder-image-outset
で境界線の縁からはみ出す距離が決まる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
では不可能な表現です。
サンプルで紹介した画像は分かりやすく説明するためにタイル状のパターンを使いましたが、角と辺でデザインを変えたり、透過部分を持つ画像を使うことで、バリエーションに富んだ境界線を作り出すことができます。
例えば、上記で示した内容の各プロパティを少し変更するだけで、全く違った見栄えを表現することもできます。これが背景画像を使わずにボーダーだけで表現可能と分かれば、想像力が広がるのではないでしょうか。
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-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-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 | アウトラインの太さを指定する |