border-image-repeat

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

CSSborder-image-repeat プロパティは、元画像の辺の領域中央の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。 border-image-slice プロパティでキーワード "fill" を使用することで、中央の領域を表示することができます。

試してみましょう

構文

css
/* キーワード値 */
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: revert-layer;
border-image-repeat: unset;

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

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

stretch

2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。

repeat

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。

round

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。

space

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。

公式定義

初期値stretch
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

border-image-repeat = 
[ stretch | repeat | round | space ]{1,2}

反復する境界画像

CSS

css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* live sample で変更可能 */
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-repeat

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-repeat
repeat
round
space
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報