border-image-repeat specifies how a border image displays.
Possible values are repeat, round, stretch, etc.
A border with border-image-repeat set to round.
<style>
.border-image-round {
border: 30px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100;
border-image-repeat: round;
}
</style>
<div class="border-image-round">
Element with border image repeat setting
</div>
border-image-repeat: stretch | repeat |
round | initial | inherit;
| Value | Description |
|---|---|
| stretch | Default. Stretch the image to fill the area |
| repeat | Image is tiled (repeated) to fill the area |
| round | The image is tiled (repeated) to fill the area while rescaling it. |
| space | The image is tiled (repeated) to fill the area while adding whitespaces around it. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-image-repeat values.
<style>
.border-image-stretch {
border: 20px solid transparent;
padding: 15px;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100;
border-image-repeat: stretch;
}
</style>
<div class="border-image-stretch">
Element with border image repeat setting
</div>
This table shows when border-image-repeat support started for each browser.
 Chrome
|
15.0 | Oct 2011 |
 Firefox
|
15.0 | Aug 2012 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
15.0 | May 2013 |
 Safari
|
6.0 | Jul 2012 |
