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 March 2016.

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

試してみましょう

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

<section id="default-example"> <div id="example-element">This is a box with a border around it.</div> </section>

#example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: #000; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em; }

構文

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-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::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 で変更可能 */ }

<div id="bordered">You can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select>

const repetition = document.getElementById("repetition"); repetition.addEventListener("change", (evt) => { document.getElementById("bordered").style.borderImageRepeat = evt.target.value; });

結果

仕様書

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