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
Value | Description | Example |
---|---|---|
[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. */