border-image-outset

The border-image-outset property describes by what amount the border image area extends beyond the border box.

/* border-image-outset: sides */
border-image-outset: 1.5;
/* border-image-outset: vertical horizontal */
border-image-outset: 1 1.2;
/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 2 45px;
/* border-image-outset: top right bottom left */
border-image-outset: 7px 12px 14px 5px;
border-image-outset: inherit;

Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.

Syntax

Values

sides

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in all four directions.

horizontal

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).

vertical

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).

top

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its top edge.

bottom

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its bottom edge.

right

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its right edge.

left

Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its left edge.

inherit

Is a keyword indicating that all four values are inherited from each parent elements' calculated value.

Formal syntax

[ <length> | <number> ]{1,4}

Specifications

Browser compatibility