CSS border-image-outset Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-image-outset is a CSS property that allows you to control the spacing between the border image and the element's content or padding. It determines the distance by which the border image extends beyond the border box of an element. By specifying positive values, you can make the border image expand beyond the border, while negative values will make it contract within the border box. This property is useful for creating visually appealing border designs, such as frames or decorative borders, by adjusting the placement of the border image relative to the element's edges.

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: Four values, each a number or <length> made absolute
Animatable: No
JavaScript syntax: object.style.borderImageOutset

Interactive Demo

border-image-outset: 0;

border-image-outset: 10px;

border-image-outset: 15px;

border-image-outset: 25px;

Example of the border-image-outset property.

Syntax

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

Values

<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Negative numbers are not allowed.
<number>Represents a multiple of the corresponding border-width. Negative values are not allowed for any of the 'border-image-outset' values.

Example

HTML

<div>Example of the border-image-outset property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result

Editor