W3cubDocs

/CSS

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.

Initial value 0s
Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited no
Media visual
Computed value as specified, but with relative lengths converted into absolute lengths
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

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 Edge Firefox Internet Explorer Opera Safari
Basic support 15 Yes 15 11 15 6
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support ? ? Yes 15 No ? ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset