仕様

border-image-repeat[ stretch | repeat | round | space ]{1,2}
一括/個別個別指定プロパティ
初期値stretch
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率なし
計算値2つのキーワード、軸ごとに1つ

border-image-repeat プロパティは、要素の境界線画像の側面と中央部分の画像をどのようにスケーリングおよびタイリングするかを設定する個別指定プロパティです。
非継承プロパティで、初期値は stretch なので、省略時は stretch が指定値となります。

補足 : 最初の値は、上、中、下の部分に適用され、2番目の値は、左、中、右部分に適用されます。

値の数

  1. cdvSampleB20 > div { padding: 1em; border: solid 1em; border-image-source: url(./che_g01bs.png); border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; }
  1. <div class="cdvSampleB20">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-repeat は非継承プロパティであり初期値は stretch なので、border-image-repeat: stretch; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-repeat: round space;

値を２つ指定しました。最初の値は、上、中、下の部分に適用され、2番目の値は、左、中、右部分に適用されます。

例
  1. border-image-repeat: space;

値を１つ指定しました。値は、上、中、下の部分と左、中、右部分に適用されます。

例

キーワード

  1. cdvSampleB20 > div { padding: 1em; border: solid 1em; border-image-source: url(./che_g01bs.png); border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; }
  1. <div class="cdvSampleB20">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-repeat は非継承プロパティであり初期値は stretch なので、border-image-repeat: stretch; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-repeat: stretch;

キーワード stretch を指定しました。stretch は、画像は領域を埋めるために引き伸ばされます。

例
  1. border-image-repeat: repeat;

キーワード repeat を指定しました。repeat は、画像は領域を塗りつぶすように並べて表示されます（繰り返されます）。

例
  1. border-image-repeat: round;

キーワード round を指定しました。round は、画像は領域を塗りつぶすように並べて表示されます（繰り返されます）。タイルの総数で領域を塗りつぶさない場合は、画像が再スケーリングされて塗りつぶされます。

例
  1. border-image-repeat: space;

キーワード space を指定しました。space は、画像は領域を塗りつぶすように並べて表示されます（繰り返されます）。タイルの総数で領域を満たさない場合、余分なスペースがタイルの周りに分散されます。

例

CSS全体のキーワード

  1. cdvSampleB40 > div,
  2. cdvSampleB40 > div > div { padding: 1em; border: solid 1em; border-image-source: url(./che_g01bs.png); border-image-slice: 33%; border-image-width: 1; border-image-outset: 0; }
  3. cdvSampleB40 > div { border-image-repeat: repeat; }
  1. <div class="cdvSampleB40">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

Original image
親
子
  1. border-image-repeat: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-image-repeat: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-image-repeat プロパティの初期値は stretch です。

親
子
  1. border-image-repeat: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-image-repeat プロパティは非継承プロパティなので初期値の stretch を設定します。

親
子