CSS border-image-outset Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-image-outset property controls how far the drawn border-image is allowed to extend beyond (or be pulled inside of) the element’s border box. It affects the visual placement of the border graphic rather than the pixel content of the element itself - you can use it to make the border artwork appear to float outside the element or to tuck the edge treatment closer to the element’s interior. Because it adjusts only where the border image is painted, it’s a tool for fine-tuning the look of a border image without changing other dimensions directly.

This property works together with the other border-image settings that determine source, slicing, width, and tiling of the graphic. For example, the image used comes from border-image-source, the image portions are determined by border-image-slice, and the thickness used when painting is governed by border-image-width. The shorthand border-image can combine these properties, and border-image-repeat controls how the side pieces tile or stretch - all of which affect how useful or visible an outset is in a given design.

Because the property only alters painting, using it can cause the border image to overflow the element’s border box and thus interact with clipping, stacking, and scrollable overflow. In practical terms, large positive outsets may make parts of the border sit over neighboring content or outside the element area (so you may need to consider overflow, stacking context or additional spacing), while inward adjustments can make the artwork overlay the element’s padding or content area. In short, border-image-outset is a visual offset control for border-image compositions - very handy for precise aesthetic adjustments when composing complex border graphics.

Definition

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: Four values, each a number or <length> made absolute
Animatable: No
JavaScript syntax: object.style.borderImageOutset

Interactive Demo

border-image-outset: 0;

border-image-outset: 10px;

border-image-outset: 15px;

border-image-outset: 25px;

Example of the border-image-outset property.

Syntax

border-image-outset: [ <length> | <number> ]{1,4}

Values

<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Negative numbers are not allowed.
<number>Represents a multiple of the corresponding border-width. Negative values are not allowed for any of the 'border-image-outset' values.

Example

HTML

<div class="container">

  <h1>CSS border-image-outset  -  example</h1>

  <div class="card">

    <p>This card uses a border-image with an outset extending the border-image beyond the element's border box.</p>

    <p>Outset values (top right bottom left): <strong>20px 10px 40px 5px</strong></p>

  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f6f8fa;
  color: #1b1f23;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.card {
  margin-top: 24px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 12px solid transparent;
  /* Colorful border produced by a gradient image source */
  border-image-source: linear-gradient(45deg, #ff7a18, #af002d 50%, #319197);
  border-image-slice: 1;
  /* Extend the border-image outside the element: top right bottom left */
  border-image-outset: 20px 10px 40px 5px;
  border-image-repeat: round;
  position: relative;
  box-shadow: 0 6px 18px rgba(11, 13, 16, 0.08);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-image-outset property. Hover over a browser icon to see the version that first introduced support for this CSS property.