The border-image-repeat
CSS property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
/* Keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* Global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset;
The border-image-repeat
property may be specified using one or two values chosen from the list of values below.
stretch
repeat
round
space
[ stretch | repeat | round | space ]{1,2}
#bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* Can be changed in the live sample */ }
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-repeat' in that specification. | Candidate Recommendation | Initial definition |
Initial value | stretch |
---|---|
Applies to | all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 15 | 12 | 15 | 11 | 15 | 6 |
round |
30 | 12 | 15 | 11 | ? | 9.1 |
space |
56 | 12 | 50 | 11 | No | 9.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 15 | ? | 9.3 | ? |
round |
? | ? | Yes | 15 | ? | ? | ? |
space |
? | ? | Yes | 50 | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat