border-image-outset property

Specifies the amount by which the border image area extends beyond the border box.

CSS Backgrounds and Borders Module Level 3, Section 6

Syntax

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

Property values

One of the following values:

length: Distance in absolute or relative units that the border image extends beyond the border box.
number: Represents a multiple of the computed value of border-width, or the width of the border box.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	0

Standards information

CSS Backgrounds and Borders Module Level 3, Section 6

Remarks

You can use border-image-outset to extend the border image area beyond the border box area, and the border-image-width property to control how much space the border image occupies within the border image area.

Negative values are ignored for border-image-outset and values bigger than the size of the image are interpreted as 100%.

Examples

In the following example, border-image-source and border-image-slice are defined for an element. When these styles are applied to a div element, it will look like the following image.

An image of an HTML element with border-image styles.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
   border-image-slice: 30;
}

In this example, values for border-image-outset are specified on the same element. The pixel values specify the amount by which the border image area extends beyond the border box. This extends beyond the border box by 10 pixels on the top, 20 pixels on the right, 30 pixels on the bottom, and 40 pixels on the left.

An image of an HTML element with border-image styles and showing the border-image-outset property.

CSS


#box {
   border: solid 15px;
   border-image-source: url("border.png"); 
   border-image-slice: 30;
   border-image-outset: 10px 20px 30px 40px;
}

To further illustrate this, the image below simulates the border box (in grey) and the border image extended beyond the border box. This HTML element uses the same styles as the example above.

An illustration of an HTML element with the border-image-outset property.