border-image-outset

Summary

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

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

/* 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-repeat: inherit;

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.</length>

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).</length>

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).</length>

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.</length>

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.</length>

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.</length>

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.</length>

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