border-image-repeat

Summary

The border-image-repeat CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax which describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

Syntax

Formal syntax: [ 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

Values

type
One of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the one-value syntax.
horizontal
One of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
vertical
One of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
stretch
Keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat
Keyword indicating that the image must be repeated until it fills the gap between the two borders.
round
Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated an integral number of times, the image is rescaled to fit.
inherit
Keyword indicating that all four values are inherited from their parents' calculated element value.

Examples

See border-image for examples of what repeat values will do.

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation Initial specification

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) 11 15 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 15.0 (15.0) Not supported ? ?

A space value was present in the early Candidate Recommendation versions. As no browsers implemented it, the value was removed. It may, however, reappear in future drafts.

See also

Document Tags and Contributors

Last updated by: davy.martinez,
Hide Sidebar