HTML Dog
Skip to navigation

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. */

Browser support

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