border-image-repeat:境界線に表示させる画像の繰り返し方を指定する
初期値 | stretch |
適用対象 | 全ての要素、::first-letter 。ただし、border-collapse がcollapse の表を除く。 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
border-image-repeatプロパティの説明
border-image-repeat
は、要素の境界線に画像を表示する際に、繰り返しや引き伸ばしなどの表示方法を指定します。具体的には、border-image-slice
で分割された9つの仮想イメージのうち、辺に配置される予定の4つの画像に対して機能します。
指定できる値は、あらかじめ用意されているキーワードです。1つの値を指定した場合は、4つの辺すべてに適用されます。2つの値を指定した場合は、1つ目の値が上下に、2つ目の値が左右に適用されます。
境界画像に関するプロパティを一括で指定する場合は、ショートハンド・プロパティのborder-imageを使用して下さい。
各プロパティの処理プロセスは以下の通りです。
border-image-source
で画像を読み込むborder-image-slice
で画像を素材として扱えるように分割するborder-image-width
で分割された画像を表示する幅が決まるborder-image-outset
で境界線の縁からはみ出す距離が決まるborder-image-repeat
で画像の伸縮や並び方が決まる
border-image-repeatに指定できる値
- stretch
- スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるように引き伸ばされます。これが初期値です。
- repeat
- スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、他のプロパティで定義されたサイズに従い、境界範囲の切れ目で切り取られます。
- round
- スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、境界範囲の切れ目に終端を合わせるために伸縮します。
- space
- スライスされた画像のうち辺に配置される素材が、該当する境界範囲を埋めるまで繰り返し配置されます。表示される画像は、境界範囲に収まるように間隔を空けることがあります。
border-image-repeatの使い方とサンプル
border-image-repeat
プロパティの構文は以下の通りです。
/* キーワード値 */
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 | アウトラインの太さを指定する |