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 ?
roundChrome 完全対応 30Edge 完全対応 12Firefox 完全対応 15IE 完全対応 11Opera 完全対応 17Safari 完全対応 9.1WebView Android 完全対応 ≤37Chrome Android 完全対応 30Firefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 9.3Samsung Internet Android ?
spaceChrome 完全対応 56Edge 完全対応 12Firefox 完全対応 50IE 完全対応 11Opera 完全対応 43Safari 完全対応 9.1WebView Android 完全対応 56Chrome Android 完全対応 56Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 9.3Samsung Internet Android ?

凡例

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