HTML Dog
Skip to navigation

CSS Property: border-image-repeat

Border image tiling. How the portions of a border image are scaled and tiled.

Possible Values

ValueDescriptionExample
stretchStretches the image to fit the area. Default behavior.
repeatTiled. Repeating the image both horizontally and vertically.
roundImage repeats but instances are not clipped. Each instance stretches to fill the background area until a new instance can fit in.
spaceImage repeats but instances are not clipped. A uniform gap spaces out each instance until a new instance can fit in.
[value] [value]First value applies to horizontal sides. Second value applies to vertical sides.stretch repeat
inherit
initial
unset

Example


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-slice: 25 fill;
    border-image-repeat: repeat;
}
/* Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   Image is sliced up.
   Instead of stretching (the default behavior), border image sides are repeated. */

Browser support

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.