最終更新日 2021年4月7日

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

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。