CSS border-image-outset Property

What You’ll Learn

The border-image-outset property controls how far a border image extends outside the element’s border box. Use it to make decorative borders appear larger and more prominent.

Definition and Usage

The border-image-outset CSS property sets the distance by which the border image area is drawn outside the element’s border box. When the value is greater than zero, the border image can protrude beyond the normal border edge, creating a bolder frame effect.

This property is part of the border-image family. It does not change the element’s layout box size, but the visual border can extend outward and overlap nearby content if spacing is not accounted for.

📝 Syntax

border-image-outset accepts one to four length or number values:

selector {
  border-image-outset: <length> | <number>;
}

/* top | right | bottom | left */
selector {
  border-image-outset: top right bottom left;
}

Basic Example

.border-box {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  border-image: url("border-image.png") 30;
  border-image-outset: 10px;
}

Syntax Rules

• One value applies the same outset to all four sides.
• Two values set vertical sides first, then horizontal sides.
• Three values set top, horizontal sides, then bottom.
• Four values follow top, right, bottom, left order.
• A unitless number multiplies the computed border width on that side.

Default Value

The default value of border-image-outset is 0. That means the border image stays aligned with the border box and does not extend outward unless you set an outset value.

💎 Property Values

border-image-outset accepts length values and unitless numbers.

Common Value Types

0 vs Outset Comparison

border-image-outset vs related properties

Examples Gallery

Try border-image-outset with fixed lengths, number multipliers, per-side values, and image borders.

<style>
  .border-box {
    width: 300px;
    height: 200px;
    border: 10px solid transparent;
    border-image: linear-gradient(135deg, #2563eb, #dc2626, #059669) 1;
    border-image-outset: 10px;
    background: #fff;
  }
</style>

<div class="border-box"></div>

.frame {
  border: 8px solid transparent;
  border-image: linear-gradient(to right, #7c3aed, #2563eb) 1;
  border-image-outset: 2;
  padding: 1rem;
}

.panel {
  border: 6px solid transparent;
  border-image: linear-gradient(135deg, #059669, #dc2626) 1;
  border-image-outset: 4px 16px;
  padding: 1rem;
}

.border-box {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  border-image: url("/images/apple.png") 30;
  border-image-outset: 10px;
}

💡 Best Practices