CSS border-image-outset Property

This property defines the distance by which the border image area extends beyond the border box.

selector { border-image-outset: [ <length> | <number> ]{1,4}; }
<length> Specifies the distance the border image extends beyond the border box using units like px, em, or rem.
<number> Represents a multiple of the element's computed border-width property.

Code Examples

This basic example extends a decorative border image 15 pixels outside of the element's actual border box on all sides.

.photo-frame {
  width: 300px;
  height: 200px;
  border: 20px solid #333333;
  border-image-source: url("https://www.adamkhoury.com/images/border_frame.png");
  border-image-slice: 30;
  border-image-outset: 15px;
}

In this advanced example, we use a unitless number with JavaScript to double the border image overhang when a user hovers over the element.

<div id="card" style="width: 200px; height: 100px; border: 10px solid #000000; border-image-source: url('https://www.adamkhoury.com/images/border_gold.png'); border-image-slice: 20;">Interactive Border</div>

<script>
const card = document.getElementById("card");
card.addEventListener("mouseover", () => {
  card.style.borderImageOutset = "2";
});
card.addEventListener("mouseout", () => {
  card.style.borderImageOutset = "0";
});
</script>

Pro Tip

If you use a unitless number instead of a length unit, the outset stays proportional to your border-width. For example, setting it to 2 means the image will extend outward by twice the thickness of the border, which is helpful for keeping things consistent if you change the border size later.

Deep Dive

Think of border-image-outset like an overhanging roof on a house. The house footprint represents your element's actual border box, while the roof is the decorative border image. By default, the roof stays flush with the walls. When you apply an outset, you're pushing that roof further out past the walls. This expansion is purely visual; it does not change the physical space the element occupies in the document flow. If you set one value, it applies to all four sides. If you set two, the first handles top/bottom and the second handles left/right. Three values cover top, then left/right, then bottom. Four values handle top, right, bottom, and left individually. Because the outset border exists outside the box model, it can overlap neighboring elements without pushing them away.

Best Practices

Use this property when you want a decorative frame that shouldn't affect the alignment of the element or its neighbors. It's great for 'pop-out' effects. Always make sure you provide enough margin on the element or padding on the parent container to prevent the outset border from overlapping other important content or getting clipped by the edge of the viewport.

Common Pitfalls

The most common mistake is expecting the outset to push other elements away like margin does; it won't. It's a visual effect only. Another issue is that it will not trigger a scrollbar if it extends off the screen. Also, it relies entirely on border-image-source being defined; without an image, this property does absolutely nothing.

Accessibility

Since this is a decorative property, it doesn't affect screen reader behavior. However, you must be careful that the outset image doesn't overlap adjacent text, which could make your content unreadable for users with low vision. Always test your layout to ensure visual clarity is maintained.

Dev Data Table: border-image-outset property

default 0
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2011
js_syntax_1 element.style.borderImageOutset = "10px";
js_syntax_2 element.style.setProperty("border-image-outset", "10px");
js_note When manipulating this via JavaScript, ensure the value is passed as a string and remember that it uses camelCase on the style object.
browsers { "Chrome": 15, "Edge": 11, "Firefox": 15, "Safari": 6, "Opera": 15, "Chrome Android": 18, "Safari on iOS": 6, "Samsung Internet": 1, "Opera Mobile": 14 }
results render here...