border-image:要素の境界線に画像を表示させる

初期値 各プロパティの初期値
適用対象 全ての要素、::first-letter。ただし、border-collapsecollapseの表を除く。
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

border-imageプロパティの説明

border-imageは、要素の外周に引かれる境界線(border)に画像を表示させます。ここで指定された画像は、border-styleで定義された境界線の代わりに表示されます。

境界線の画像は、前提として要素に境界線の専有幅が用意されていなければ表示されません。つまり、border-styleの値がnone以外であり、border-widthの値が1px以上である必用があります。

border-image-sourceの値がnone、あるいは何らかの理由で画像が表示されなかった場合は、border-styleに指定された方法が優先されます。そのため、境界線に画像を使用する時でも、必ずborder関連のプロパティを併記しておいて下さい。

border-imageは、以下の機能をまとめて指定するショートハンド・プロパティです。境界線に画像が表示されるまでのプロセスは以下の通りです。

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

border-imageに指定できる値

<border-image-source>
境界線の画像を指定する値です。ソース元となる画像をURLで呼び出します。それ以外では、グラデーションやキーワードのnoneが使用できます。詳細はborder-image-sourceを参照して下さい。
<border-image-slice>
境界線の画像を分割する値です。最大で4つの値を指定できます。詳細はborder-image-sliceを参照して下さい。
<border-image-width>
境界線の画像を表示する幅を示す値です。最大で4つの値を指定できます。これはあくまで画像の縮尺を示すものであり、境界線の専有幅を変える場合はborder-widthの値を変更します。詳細はborder-image-widthを参照して下さい。
<border-image-outset>
境界線の画像が要素の縁からどの程度はみ出すのかを示す値です。これにより、境界線が確保している領域から外側へ向かって画像が移動します。負の値は無効です。詳細はborder-image-outsetを参照して下さい。
<border-image-repeat>
境界線の画像に対して伸縮や並び方の指定をする値です。値が一つ指定された場合は、四辺を同時に操作します。値が二つ指定された場合は、上下の辺と左右の辺を個別に操作します。詳細はborder-image-repeatを参照して下さい。

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

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

CSS
/* source | slice */
border-image: url("image.png") 10;
border-image: url("image.png") 10 25%;
border-image: linear-gradient(cyan, magenta) 30;
border-image: linear-gradient(cyan, magenta) 30 fill;

/* source | slice | repeat */
border-image: url("image.png") 10 repeat;
border-image: url("image.png") 10 stretch;

/* source | slice | width */
border-image: url("image.png") 10 / 5px;
border-image: linear-gradient(cyan, magenta) 20 / 10%;

/* source | slice / width / outset | repeat */
border-image: url("image.png") 30 / 30px / 15px round;
border-image: url("image.png") 32 16 / 30px 1rem / 15px .5rem space;

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

border-imageの実例

それでは具体的な書き方を見てみましょう。ここでは、30pxのひし形で構成された縦横90pxの画像を使います。

ひし形のサンプル画像

まず初めに、要素に境界線を表示させるための下準備を行います。単純な<div>要素にborderプロパティで幅10pxの境界線を指定すると、以下のように表示されます。

表示確認

この境界線に先ほどの画像を配置してみましょう。境界線に使用する画像は、border-image-sourceの値で呼び出します。最初からショートハンド・プロパティを使うと、各機能の仕組みを十分に把握しきれないため、専用のプロパティを使って説明します。

表示確認

境界線の幅は10pxです。そこに90pxの画像が無理やり配置されました。画像を指定しただけでは全てが初期状態であるため、四隅に一つだけ表示されることになります。

次に、画像をスライスして境界線に表示する範囲を決めなくてはなりません。画像の分割範囲は、border-image-sliceで定義します。ここでは、ひし形の模様に合わせて上下左右30pxの共通範囲でスライスします。

表示確認

謎の模様が表示されました。なぜこのような状態になるのかと言うと、border-image-repeatの機能が有効になり、初期値が反映されたからです。ここから、画像のパターンに合わせて各プロパティを調整していくことになります。

画像に描かれている模様は30pxのひし形です。そこで、このサイズに合わせて境界線の幅を見直し、繰り返し表示されるパターンに変更します。

表示確認

これで最低限の状態が整いました。border-image-widthは、border-widthで定義された境界線の専有幅の上で、画像をどの程度の幅で配置するかを指定するプロパティです。つまり、border-image-widthだけを指定しても、境界線そのものの範囲は変わらない点に注意して下さい。上記の例では、この二つを同じ値にしています。

border-image-outsetは、境界線の外周から画像がどの程度はみ出すかを指定するものです。例えば、画像の一部を要素の外に出して装飾としての見栄えを作る時などに有効です。ただし、要素の大きさ自体は変わらないため、他の要素との干渉に気をつける必用があります。

表示確認

ここまでの内容を見ると、タイル状に並んだ模様の切れ目が気になります。そこで、境界線の幅を模様の半分に落として、繰り返し表示するパターンを並べて比較します。

表示確認

このように、境界線に使用する画像の大きさと表示する範囲を工夫すれば、色々な模様を作り出すことができます。各プロパティの仕組みを理解したら、ショートハンド・プロパティでまとめることも可能です。以下の例は、全く同じ装飾を示しています。これを参考に、画像を変えてオリジナルの境界線を作って下さい。

表示確認

border-imageに関連する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 アウトラインの太さを指定する