border-image-repeat
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
Theborder-image-repeatCSS property defines how the images for the sides and the middle part of theborder image are scaled and tiled. The middle region can be displayed by using the keyword "fill" in theborder-image-slice property.
Try it
border-image-repeat: stretch;border-image-repeat: repeat;border-image-repeat: round;border-image-repeat: space;border-image-repeat: round stretch;<section> <div>This is a box with a border around it.</div></section>#example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: black; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em;}Syntax
/* Keyword value */border-image-repeat: stretch;border-image-repeat: repeat;border-image-repeat: round;border-image-repeat: space;/* top and bottom | left and right */border-image-repeat: round stretch;/* Global values */border-image-repeat: inherit;border-image-repeat: initial;border-image-repeat: revert;border-image-repeat: revert-layer;border-image-repeat: unset;Theborder-image-repeat property may be specified using one or two values chosen from the list of values below.
- Whenone value is specified, it applies the same behavior onall four sides.
- Whentwo values are specified, the first applies to thetop, middle, and bottom, the second to theleft and right.
Values
stretchThe source image's edge regions are stretched to fill the gap between each border.
repeatThe source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.
roundThe source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.
spaceThe 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 definition
| Initial value | stretch |
|---|---|
| Applies to | all elements, except internal table elements whenborder-collapse iscollapse. It also applies to::first-letter. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
border-image-repeat =
[stretch|repeat|round|space]{1,2}
Examples
Repeating border images
CSS
#bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("border.png") 27; border-image-repeat: stretch; /* Can be changed in the live sample */}<div>You can try out various border repetition rules on me!</div><select> <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>const repetition = document.getElementById("repetition");repetition.addEventListener("change", (evt) => { document.getElementById("bordered").style.borderImageRepeat = evt.target.value;});Results
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-repeat |
Browser compatibility
Loading…