border-image-repeat

Specifies if the border image should be set to be rounded, repeating, spaced or stretched.

Syntax

The border-image-repeat can be set to one of the stretch, repeat, round or space values. Two values can also be used if we want to have different values set respectively for the horizontal and vertical border-image-repeat properties.

/* One value set, applied both horizontally and vertically: */
border-image-repeat: space;
/* Two values set:
stretch for the horizontal borders,
round for the vertical borders */ 
border-image-repeat: stretch round;

Values

stretch
The image used as a border-image-source will be stretched to fill the space between each corner of the element.

repeat
The source image will be repeated in a tiling pattern to fill the space between the corners of the element. The last repetition of the image might be clipped in order to leave no gap.

round
Similar to repeat, the source image will be repeated in a tile pattern to fill the space between the corners of the element. The difference is that instead of clipping the last repetition, all repetitions will be slightly stretched to achieve a perfect fit.

space
Similar to repeat, the source image will be repeated in a tiling pattern to fill the space between the corners of the element. The difference is that instead of clipping the last tile, the remaining space will be equally distributed in gaps between the previous tiles, so that the first and last tiles start and end exactly on the corners of the element.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image-repeat? Submit a codepen.io demo and we'll showcase it here ↴