最終更新日

border-image-repeatプロパティ

border-image-repeatは、border-image-sliceによって切り分けられた罫線画像の、上下および左右の罫線部分の画像の繰り返しについてキーワードで指定します。

値として2個のキーワードを半角スペースで区切って指定した場合は、それぞれのキーワードが上下の罫線・左右の罫線のそれぞれの繰り返しを示します。値を1個のみ指定した場合は、上下左右すべての罫線に同じ繰り返しが適用されます。

ボーダー画像関連プロパティの値をまとめて指定するには、border-imageを使用します。

CSS3での変更点
・border-image-repeatは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
stretch すべての要素 なし
説明
stretch 画像は繰り返されず、領域いっぱいまで拡張されます。(初期値
repeat 画像は領域いっぱいまで繰り返されます。
round 画像は領域いっぱいまで繰り返されるが、最初のパターンと最後のパターンの端が、領域の端とぴったり接するように配置され、位置は画像パターンのサイズで調整されます。
space 画像は領域いっぱいまで繰り返されるが、最初のパターンと最後のパターンの端が、領域の端とぴったり接するように配置され、位置は余白のスペースによって調整されます。
サンプルコード
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME