border-image-repeat:境界線に表示させる画像の繰り返し方を指定する

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

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

border-image-repeatは、要素の境界線に画像を表示する際に、繰り返しや引き伸ばしなどの表示方法を指定します。具体的には、border-image-sliceで分割された9つの仮想イメージのうち、辺に配置される予定の4つの画像に対して機能します。

指定できる値は、あらかじめ用意されているキーワードです。1つの値を指定した場合は、4つの辺すべてに適用されます。2つの値を指定した場合は、1つ目の値が上下に、2つ目の値が左右に適用されます。

境界画像に関するプロパティを一括で指定する場合は、ショートハンド・プロパティのborder-imageを使用して下さい。

各プロパティの処理プロセスは以下の通りです。

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

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

stretch
スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるように引き伸ばされます。これが初期値です。
repeat
スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、他のプロパティで定義されたサイズに従い、境界範囲の切れ目で切り取られます。
round
スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、境界範囲の切れ目に終端を合わせるために伸縮します。
space
スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、境界範囲に収まるように間隔を空けることがあります。

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

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

CSS
/* キーワード値 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* 垂直 | 水平 */
border-image-repeat: round stretch;

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

border-image-repeatの実例

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

ひし形のサンプル画像

今回は、この画像を境界線に表示させてborder-image-repeatの値を変更したものを比較します。全体の流れを把握したい場合は、先にborder-imageの解説を参照して下さい。

表示確認

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

この時点では、まだborder-image-repeatを指定していません。そのため、各辺の画像は既定値に従い表示されています。それでは、全く同じ装飾に対してborder-image-repeatの値だけを変更した場合の挙動を比較してみましょう。

表示確認

このままでは、少し分かりづらいかもしれません。各キーワードの特徴を把握するために、境界画像の表示幅を半分に縮めてみます。このように、境界画像の機能を使いこなすには、関連するプロパティの値を上手く組み合わせる必用があります。

表示確認

これで特徴がつかみやすくなったと思います。例えば、スライスする大きさや境界画像を表示する大きさを調整することで、同じ画像から別のパターンを作り出すことができます。この内容を参考に、ぜひオリジナルの境界線を作ってみましょう。

表示確認

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