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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* 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.
- When one value is specified, it applies the same behavior on all four sides.
- When two values are specified, the first applies to the top and bottom, the second to the left and right.
Values
stretch
- The source image's edge regions are stretched to fill the gap between each border.
repeat
- The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.
round
- The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.
space
- The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.
Formal syntax
[ stretch | repeat | round | space ]{1,2}
Example
CSS
#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 */ }
HTML
<div id="bordered">You can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select>
JavaScript
var repetition = document.getElementById("repetition"); repetition.addEventListener("change", function (evt) { document.getElementById("bordered").style.borderImageRepeat = evt.target.value; });
Specifications
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 |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-image-repeat | Chrome Full support 15 | Edge Full support 12 | Firefox Full support 15 | IE Full support 11 | Opera Full support 15 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 15 | Opera Android ? | Safari iOS Full support 9.3 | Samsung Internet Android ? |
round | Chrome Full support 30 | Edge Full support 12 | Firefox Full support 15 | IE Full support 11 | Opera Full support 17 | Safari Full support 9.1 | WebView Android Full support ≤37 | Chrome Android Full support 30 | Firefox Android Full support 15 | Opera Android ? | Safari iOS Full support 9.3 | Samsung Internet Android ? |
space | Chrome Full support 56 | Edge Full support 12 | Firefox Full support 50 | IE Full support 11 | Opera Full support 43 | Safari Full support 9.1 | WebView Android Full support 56 | Chrome Android Full support 56 | Firefox Android Full support 50 | Opera Android ? | Safari iOS Full support 9.3 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown