border-image-repeat

CSSborder-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: unset;

border-image-repeat プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。

  • 値が1つ指定された場合、全4辺に同じ動作が適用されます。
  • 値が2つ指定された場合、1つ目の動作が上下に、2つ目が左右に適用されます。

stretch
2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。
repeat
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。
round
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。
space
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。

形式文法

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

CSS コンテンツ

#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px 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 の定義
勧告候補 初回定義
初期値stretch
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-image-repeatChrome 完全対応 15Edge 完全対応 12Firefox 完全対応 15IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 1.0
roundChrome 完全対応 30Edge 完全対応 12Firefox 完全対応 15IE 完全対応 11Opera 完全対応 17Safari 完全対応 9.1WebView Android 完全対応 ≤37Chrome Android 完全対応 30Firefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 2.0
spaceChrome 完全対応 56Edge 完全対応 12Firefox 完全対応 50IE 完全対応 11Opera 完全対応 43Safari 完全対応 9.1WebView Android 完全対応 56Chrome Android 完全対応 56Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明