The border-image-outset CSS property specifies the distance by which an element's border image is set out from its border box.

/* <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;

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.

Initial value0
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
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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.

  • When one value is specified, it applies the same outset to all four sides.
  • When two values are specified, the first outset applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first outset applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the outsets apply to the top, right, bottom, and left in that order (clockwise).

Values

<length>
The size of the border outset as a dimension.
<number>
The size of the border outset as a multiple of the corresponding border-width.

Formal syntax

[ <length> | <number> ]{1,4}

Example

HTML

<div id="outset">This element has an outset border image!</div>

CSS

#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;
}

Result

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support15 Yes1511156
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes15 ? ? ?

Document Tags and Contributors

 Last updated by: mfluehr,