CSS Property: border-image-repeat
Border image tiling. How the portions of a border image are scaled and tiled.
Possible Values
| Value | Description | Example |
|---|---|---|
stretch | Stretches the image to fit the area. Default behavior. | |
repeat | Tiled. Repeating the image both horizontally and vertically. | |
round | Image repeats but instances are not clipped. Each instance stretches to fill the background area until a new instance can fit in. | |
space | Image 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. */