CSS border-image-repeat

The border-image-repeat CSS property sets the way a border image's edges are repeated. Border images are sliced into four edges and four corners by CSS. The edge regions are then resized to to the width of the border image area. Then they may either be stretched, repeated, stretched and repeated (round) or spaced and repeated (space) to fit.

be stretched to fit the length of the border, repeated undefinately, or repeated a whole number of times before being stretched or spaced to fit.

stretchrepeatroundspace
border-image-repeat: keyword
border-image-repeat: stretch;   /* Stretch to fit */
border-image-repeat: round;     /* Repeat whole N of times, then stretch */
border-image-repeat: repeat;    /* Repeat without stretching, tiles may be cut */

Browser Support: Supported by modern browsers, except for the space value, which has partial support. The property is not supported by IE10 and below. IE11 introduces support. See the caniuse.com compatibility table for more.

Usage

The default stretching of the images is okay for most frames, but some border-images are specifically designed to be repeated. The round value is certainly the most common since it seamlessly fits a repeatable border image, regardless of the size of the container. For example:

zigzag border-image split

The unedited zigzag image is available here.

div.example {
border: 10px solid orange; border-image-source: url('zigzag.png'); border-image-slice: 10; border-image-repeat:round;
}

repeat vs round

The repeat value is different from round in that it doesn't resize the tiles to repeat them a whole number of times. A background tile may be cut near the corners. This is usually but not always undesired. Here's a border using repeat and the following image:

CSS SVG border image

In this case, the borders have a bad fit.

div.example {
border: 20px solid orange; border-image-source: url('svg_border.svg'); border-image-slice: 33.3333%; border-image-repeat: repeat;
}

May not work in some modern browsers that do not resize SVGs correctly.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>