Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-image-repeat

概要

CSS の border-image-repeat プロパティは、ボーダー画像を、繰り返したり、ボーダーのサイズにあわせたりする方法を定義します。値を 1 つだけ渡すとその値で四辺すべてのボーダーを設定します。2 つ渡すと、それぞれ横方向のボーダー、縦方向のボーダーを設定します。

初期値stretch
適用対象全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く. It also applies to ::first-letter.
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

[ stretch | repeat | round ]{1,2}
border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit

type
画像の繰り返し方法を表す stretchrepeatroundspace のいずれかのキーワード。1 値構文でのみ使えます
horizontal
画像の繰り返し方法を表す stretchrepeat、round、space のいずれかのキーワード。2 値構文でのみ使えます
vertical
画像の繰り返し方法を表す stretchrepeat、round、space のいずれかのキーワード。2 値構文でのみ使えます
stretch
2 つのボーダー間をちょうど埋めるように画像を引き伸ばすためのキーワードです
repeat
2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです
round
2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整します
inherit
4 つすべての値が親要素の計算値から継承されることを示すキーワードです

さまざまな値の使用例は border-image をご覧ください。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-repeat' in that specification.
勧告候補 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 15.0 (15.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 15.0 (15.0) 未サポート ? ?

space 値は勧告候補版の早い段階で提案されていましたが、どのブラウザも実装しなかったため取り除かれました。今後、草案で再登場するかもしれません。

ドキュメントのタグと貢献者

 このページの貢献者: teoli, Sebastianz, ethertank, sosleepy
 最終更新者: teoli,