border-image-outset

border-image-outset sets the amount by which the border image should be able to extend outside of the border box.

Syntax

The border-image-outset can have anywhere from one to four values set. Each of those values belongs to the top, right, bottom and left sides. Similar as with other properties that cover multiple sides, if one value is set – it covers all sides. If two values are set, the first value is for top and bottom, while the second value is for the left and right values. If three values are set, they are for top, right and bottom respectively, while the left value is set the same as the right value.
Each value can be either a number or a length value.

/* setting border-image-outset to a length value */
border-image-outset: 6px;

/* setting border-image-outset to a number value (multiple of the respective border width)
border-image-outset: 2;

Values

length
If a length unit (ex.: 3px) is used – it specifies how far the border-image will extend beyond the edges. This has the default value of 0.

number
If a number is used instead of a length unit – this represents a multiplication of the corresponding border’s width value.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image-outset? Submit a codepen.io demo and we'll showcase it here ↴