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.
CSS の border-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 |
---|---|
適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
反復する境界画像
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-image-repeat | ||||||||||||
repeat | ||||||||||||
round | ||||||||||||
space | ||||||||||||
stretch |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.