CSS - border-image-outset
The border-image-outset
property describes by what amount the border image area extends beyond the border box.
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
<a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/number"><number></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>1,4<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a>
Description
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 |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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 | ? | ? |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-outset' in that specification. |
Candidate Recommendation | Initial definition |
License
© 2016 Mozilla 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