CSS border-image-repeat property specifies how the sliced images should be tiled and scaled so that they can fill the middle section and the sides of the border. In order to fill the middle section and sides of the border, the sliced images can repeat or stretch.
In the example below, the sliced images repeat to fill the sides of the border. Try it out:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-repeat: repeat;
}
If we don’t want the sliced image to be repeated, we can use border-image-repeat: stretch;. In this case, the sliced images stretch to cover the full length of the border. Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-repeat: stretch;
}
CSS Syntax
The border-image-repeat property has the below syntax:
border-image-repeat: stretch|repeat|round|space|initial|inherit;
Property Values
The border-image-repeat property accepts the following values:
| stretch | This is the default value. The sliced images stretch to cover the full length of the border. |
| repeat | The sliced images repeat to cover the full length of the border. |
| round | Similar to repeat. The only difference is that the sliced images are rescaled if they do not fill the border with a whole number. |
| space | It is also similar to repeat. The only difference is that, if the sliced images do not fill the area with a whole number, the remaining space is evenly distributed among the repeated tiles. |
| initial | Sets the border-image-repeat property to its default value(stretch). |
| inherit | Inherits the border-image-repeat property from the parent element. |
General Info
| Default Value | stretch |
| Inherited | No |
| JavaScript Usage | element.style.borderImageRepeat = “repeat”; |
Related Pages
CSS Tutorial: CSS Borders
