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 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 |
/* 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;
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.
<length>
or a <number>
of the amount by which the border image area extends beyond the border box in all four directions.<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>
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>
or a <number>
of the amount by which the border image area extends beyond the border box past its top edge.<length>
or a <number>
of the amount by which the border image area extends beyond the border box past its bottom edge.<length>
or a <number>
of the amount by which the border image area extends beyond the border box past its right edge.<length>
or a <number>
of the amount by which the border image area extends beyond the border box past its left edge.inherit
[ <length> | <number> ]{1,4}
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-outset' in that specification. | Candidate Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 15.0 | (Yes) | 15.0 (15.0) | 11 | 15 | 6 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 15.0 (15.0) | No support | ? | ? |
© 2005–2017 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