MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概要

CSS の border-image-repeat プロパティは、画像をボーダーのサイズに合わせるために、ボーダーの中間部分で画像をどのように扱うかを定義します。値を 1 つだけ渡すとその値で四辺すべてのボーダーを設定します。2 つ渡すと、それぞれ横方向のボーダー、縦方向のボーダーを設定します。

初期値stretch
適用対象全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く. It also applies to ::first-letter.
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* border-image-repeat: type */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertical */
border-image-repeat: round stretch;

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

type
水平方向および垂直方向の画像の扱い方を表す stretchrepeatroundspace のいずれかのキーワード。
horizontal
水平方向の画像の扱い方を表す stretchrepeatroundspaceのいずれかのキーワード。
vertical
垂直方向の画像の扱い方を表す stretchrepeatroundspaceのいずれかのキーワード。
stretch
2 つのボーダー間をちょうど埋めるように画像を引き伸ばすためのキーワードです。
repeat
2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです。
round
2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整します。
space
領域を埋めるように画像を (繰り返し) 並べます。整数回の繰り返しで領域が埋まらない場合は、並べた画像の間に空白を追加します。

形式的構文

[ stretch | repeat | round | space ]{1,2}

CSS コンテンツ

#borderImageRepetition {
  width: 260px;
  height: 80px;
  margin-bottom: 10px;
  border: 30px solid;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
  border-image-repeat: stretch; /* live sample で変更可能 */
}

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
border-image-repeat の定義
勧告候補 初回定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 (有) 15.0 (15.0) 11 15 6
round 30[3] (有) 15.0 (15.0) 11 ? 9.1[4]
space 56[1] (有) 50.0 (50.0)[2] 11 未サポート 9.1[4]
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) 15.0 (15.0) 未サポート ? 9.3[4]
round ? (有) 15.0 (15.0) ? ? ?
space ? (有) 50.0 (50.0)[2] ? ? ?

[1] space 値をサポートしていますが、実際の効果は repeat 値と同じです。Chromium bug 584916 をご覧ください。

[2] バグ 720531 で実装しました。

[3] Chromium bug 169254 をご覧ください。

[4] WebKit bug 14185 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, Sebastianz, ethertank, sosleepy
 最終更新者: yyss,