Try it
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;
<section id="default-example">
<div id="example-element">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
css
/* 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;
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, middle, 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 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 |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
border-image-repeat =
[ stretch | repeat | round | space ]{1,2}
Examples
Repeating border images
CSS
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 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>
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 |