Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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.

Initial value0s
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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-outset: inherit;

Values

When a value is specified as a unitless <number>, that value is multiplied by the corresponding computed border-width to determine the border-image-outset. Negative values are invalid.

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

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-outset' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) 11 15 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 15.0 (15.0) No support ? ?

Document Tags and Contributors

 Last updated by: Sebastianz,