Definition and Usage
The border-image-repeat CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
- Initial stretch
- Applies to all elements, except internal table elements when border-collapse is collapse
- Inherited no
- Media visual
- Computed Value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
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
- Is 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
- Is 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
- Is 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
- Is a keyword indicating that the image must be stretched to fill the gap between the two borders.
- repeat
- Is a keyword indicating that the image must be repeated until it fills the gap between the two borders.
- round
- Is a 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 integer number of times, the image is rescaled to fit.
- inherit
- Is a keyword indicating that all four values are inherited from their parent's element calculated value.
Examples
See
border-image for examples of what repeat values will do.
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|
Basic support | 15.0 | 15.0 (15.0) | Not supported | Not supported | Not supported |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|
Basic support | NA | 15.0 (15.0) | Not supported | NA | NA |