CSS border-image-outset Property
The border-image-outset CSS property specifies the distance by which border image is set out from its border box. See examples and try them yourself.
The CSS border-image-outset property specifies the amount by which the border image area extends beyond the element's border box. It is one of the CSS3 properties.
By default, a border image is painted inside the border box. Pushing it outward with border-image-outset is useful when you want the decorative frame to overhang the element — for example, an ornamental border, a drop-shadow-like frame, or a ribbon effect that should sit outside the content rather than crowd it.
The outset only changes where the image is drawn; it does not affect the element's box size or its layout. The extra area can overlap neighboring content, so leave enough room (or extra margin) around the element to avoid clipping or overlap.
How it works
border-image-outset accepts from one to four values, following the standard CSS top–right–bottom–left shorthand pattern:
- One value sets all four outsets.
- Two values — the first sets top and bottom, the second sets right and left.
- Three values — the first sets the top, the second sets right and left, the third sets the bottom.
- Four values are applied to the top, right, bottom and left sides, in that order.
Each value can be either a <length> (such as 10px) or a unitless <number>. A number is a multiple of the element's corresponding border width: with border-width: 10px, an outset of 2 resolves to 20px. Negative values are not allowed.
The property has no visible effect unless a border image source is set (via border-image or border-image-source).
| Initial Value | 0 |
|---|---|
| Applies to | All elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.borderImageOutset = "20px"; |
Syntax
CSS border-image-outset values
border-image-outset: length | number | initial | inherit;Example of the border-image-outset property:
CSS border-image-outset code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
</body>
</html>Result
![CSS border-image-outset description](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "CSS border-image-outset example" =420x)
In the example above the border image is pushed 10px past the top edge, kept flush on the right (0), and pushed 15px past the bottom edge — so the frame visibly overhangs the paragraph.
Values
| Value | Description | Play it |
|---|---|---|
length | The distance by which the border image extends beyond the border box, given in any CSS length unit (px, em, etc.). The default is 0. | Play it » |
number | A unitless multiple of the element's corresponding border width. For example, 2 with a 10px border equals 20px. | Play it » |
initial | Sets the property to its default value (0). | Play it » |
inherit | Inherits the property from its parent element. |
Related properties
border-image-outset is one part of the border-image shorthand. These companion properties control the rest of the effect:
- border-image — the shorthand that sets all border-image values at once.
- border-image-source — the image to use as the border.
- border-image-slice — how the source image is cut into the nine border regions.
- border-image-width — the width of the border image area.
- border-image-repeat — whether slices are stretched, repeated, or rounded.