The border-image-outset
CSS property sets the distance by which an element's border image is set out from its border box.
Portions of the border image that are rendered outside the border box as a result of this property do not trigger scrolling. Moreover, these areas don't capture mouse events.
/* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /* Global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset;
The border-image-outset
property may be specified as one, two, three, or four values. Each value is a <length>
or <number>
. Negative values are invalid.
<length>
<number>
border-width
.[ <length> | <number> ]{1,4}
<div id="outset">This element has an outset border image!</div>
#outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* = 1.5 * 1.4rem = 2.1rem */ margin: 2.1rem; }
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-outset' in that specification. | Candidate Recommendation | Initial definition |
Initial value | 0 |
---|---|
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 15 | 12 | 15 | 11 | 15 | 6 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 15 | ? | ? | ? |
© 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