CSS 'border-image-outset' Property Explained

The CSS 'border-image-outset' property specifies the amount by which the border image area extends beyond the border box. It pushes the border image outward, away from the element, so it can sit outside the border box. It does not control the space between the border and the element's content (that is what padding does), and it does not change the element's layout: the outset part of the image is purely visual.

CSS 'border-image-outset' Property Examples

See the Pen CSS 'border-image-outset' Property Explained by Webzstore (@webzstore) on CodePen.

The 'border-image-outset' property enhances the capabilities of CSS for decorative border styling, allowing designers to achieve precise visual effects by controlling how far a border image extends beyond the element's border box. This property supports creative and flexible design approaches, enabling the creation of visually rich and detailed layouts.

Browser Support For 'border-image-outset' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-image-outset for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-image-outset' Property

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

/* Example: the image is only drawn when a border-image-source is set */
#outset {
  border: 1.4rem solid;
  border-image: radial-gradient(#ffff22, #5555ff) 40;
  border-image-outset: 1.5;     /* 1.5 x 1.4rem = 2.1rem beyond the border box */
  margin: 2.1rem;               /* leave room so neighbours are not overlapped */
}

• A single value applies to all four sides.
• Two values set the top and bottom first, then the left and right.
• Three values are set at the top, left and right, and then the bottom.
• Four values set the top, right, bottom, and left, respectively.

Usage of the 'border-image-outset' Property

Use 'border-image-outset' when you need to extend a border image outward, beyond the element's border box. This property is beneficial for visual effects where the border image needs to overlap or extend past the normal bounds of the element, such as frames or decorative accents. The outset area does not affect layout, does not cause scrolling or overflow, and does not receive pointer events, so leave room with margin if it must not overlap neighbouring content. Negative values are not allowed.

Property Values of the 'border-image-outset' Property

• Length: Specifies how far the border image extends beyond the border box, using non-negative length units (e.g., px, em).
• Number: An <number> value that is multiplied by the corresponding border-width to determine the outset distance.
• Initial: Resets the 'border-image-outset' to its default value (0).
• Inherit: Inherits the 'border-image-outset' from the parent element.