HTML Dog
Skip to navigation

CSS Property: border-image-outset

A border image’s edge overhang. The extent to which a border image can spill outside the edge of the border area.

Set by establishing offsets from the top, right, bottom, and left edges of a border, pushing the drawing area outwards. Any part of the border pushed outside of the standard border area will have no impact on anything around it — it will not push another box from its initial position, trigger scrolling, or react to mouse events.

Possible Values

ValueDescriptionExample
[length]Top, right, bottom, and left offset. Should not be negative.10px
[number]Top, right, bottom, and left offset. A multiple of the computed border width. Should not be negative.1.2
[value] [value]First value is top and bottom offset. Second value is right and left offset.5px 10px
[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
initial
unset

Example


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-outset: 0.5;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   - The border is pushed outwards, overhanging the border edge, by 50% of the border width. */

Browser support

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