HTML Dog
Skip to navigation

CSS Property: border-image-width

Border image drawing area. The width within a border that an image is painted in.

Set by establishing inner-offsets from the top, right, bottom, and left edges of a border. If the border’s image width is wider than the border’s width (set by border-width), the border image will spill over the border’s boundary and leak into the box’s padding and content areas.

Possible Values

ValueDescriptionExample
[length]Top, right, bottom, and left offset. Should not be negative.10px
[percentage]Top, right, bottom, and left offset. Calculated in relation to the border image area. Should not be negative.25%
[number]Top, right, bottom, and left offset. A multiple of the computed border width. Should not be negative.1.2
autoTop, right, bottom, and left offset. Equates to the width of the corresponding border-image-slice. If this isn’t applicable, it equates to the border width.
[value] [value]First value is top and bottom offset. Second value is right and left offset.25% 10%
[value] [value] [value]First value is top offset. Second value is right and left offset. Third value is bottom offset.1.2 0.8 0.5
[value] [value] [value] [value]First value is top offset. Second value is right offset. Third value is bottom offset. Fourth value is left offset.5px 10px 15px 20px
inherit

Example


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-width: 5px;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   - The border image is painted in the outer 5 pixels of the border area. */

Browser support

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