border-image-source:境界線に表示させる画像を指定する

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

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

border-image-sourceは、要素の境界線として表示させる画像を指定します。ここで呼び出される画像は、結果的に境界線として表示されるまでに様々な加工を受けます。つまり、元の画像は境界線を構成するパターンの素材として扱われます。

境界線に画像を表示させるには、いくつかの事前準備が必用です。そのため、単純にborder-image-sourceを指定しただけでは画像は表示されません。前提として、境界線が表示される専有幅を確保しておくためにborder-styleの値をnone以外、border-widthの値を1px以上にしておかなければなりません。

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

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

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

none
画像を指定しない値です。これが初期値です。
<image>
画像を指定する値を指定します。URLによる参照、グラデーション、ウェブページの一部を切り出すなどの操作が行えます。

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

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

CSS
/* キーワード値 */
border-image-source: none;

/* <image>値 */
border-image-source: url(image.png);
border-image-source: linear-gradient(cyan, magenta);

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

border-image-sourceの実例

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

ひし形のサンプル画像

まず初めに、境界線に画像を表示させるために境界線の専有幅を確保します。以下の内容は、単純な<div>要素にborderプロパティで幅10pxの境界線を指定したものです。

表示確認

この境界線に先ほどの画像を表示させてみましょう。border-image-sourceに画像のURLを指定すると、自動的に境界線の範囲内に配置されます。

表示確認

これで画像は表示されましたが、意図した表現でないことは明らかです。境界線の幅は10pxで、そこに90pxの画像が無理やり配置されています。四隅に画像が一つだけ表示されているのは、他のプロパティの値が初期状態であるためです。

ここまでの内容が、border-image-sourceの役割です。これ以降は、画像を素材とした配置パターンを編集していく作業になります。全体の流れを把握するには、先にborder-imageの解説を参照して下さい。各プロパティの値を指定することで以下のようなパターンを作り出すことができます。

表示確認

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