CSS Property: border-image
Borders made up of images.
A shorthand property that combines:
Possible Values
A list of background characteristic sub-values. Possible sub-values follow the same rules as possible values for corresponding aforementioned properties. The sub-value list follows a specific format:
[source] [slice] / [width] / [outset] [repeat]
Full example: url("b.png") 33% fill / 10px 20px / 0.1 space
Not all values are required — any other excluded values will default to their initial value. “/” is also only used to precede width and outset portions.
Basic example: url("b.png") 33% space
inherit, initial, or unset can also be used on their lonesome.
Example
aside {
border: 10px solid fuchsia;
border-image: url("fluffy.png") 13 30 7 1 fill repeat;
}
/* - Establishes a 10-pixel wide border with a solid fuchsia-colored fallback.
- Sets "fluffy.png" as the border image.
- The image is sliced 13 pixels in from the top, 30 pixels in from the right, 7 pixels in from the bottom, 1 pixel in from the left and the middle portion is preserved.
- Finally, the border image sides are set to repeat. */