CSS border-image-outset Property

Definition and Usage

The border-image-outset property sets how far a border-image is drawn outside the element’s border box. Raising the value makes the frame look larger without changing the box’s layout width or height.

Parts painted outside the border box do not receive pointer events and do not create overflow scrollbars. Leave room with margin if neighbors sit close. Negative values are invalid and the declaration is ignored.

CSS Syntax

Use one to four values, like margin: one for all sides; two for top/bottom then left/right; three for top, left/right, bottom; four for top, right, bottom, left.

Property Values

How to Use border-image-outset

Apply a border image first, give the border some width, then push the image outward.

1. Set a non-zero border-width (for example border: 12px solid;).
2. Add a border image with border-image or the source and slice longhands.
3. Set border-image-outset to a length or a number. It is not inherited.
4. Add margin when the outward paint would overlap neighbors.

Live Preview

The dashed stage is the layout box. Change border-image-outset and watch the gradient frame move outward.

CSS Examples

Each snippet adds only what border-image-outset needs: a border, a border image, and an outset value. Use Try It Yourself for a live editor.

<style>
  div {
    border: 12px solid;
    border-image: linear-gradient(#2563eb, #dc2626) 1;
    border-image-outset: 15px;
    padding: 12px;
  }
</style>

<div>15px outset</div>

<style>
  div {
    border: 8px solid;
    border-image: linear-gradient(to right, #7c3aed, #2563eb) 1;
    border-image-outset: 1.5;
    padding: 12px;
  }
</style>

<div>1.5 × border width</div>

<style>
  div {
    border: 10px solid;
    border-image: linear-gradient(135deg, #059669, #dc2626) 1;
    border-image-outset: 4px 16px;
    padding: 12px;
  }
</style>

<div>4px vertical, 16px horizontal</div>

Key Takeaways