Export (0) Print
Expand All

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 6IE11

 

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 ToAll elements
Mediavisual
Inheritedno
Initial Value0

Standards information

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%.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-border-image-outset" as an alias for this property.

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.


#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.


#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.

See also

CSSStyleDeclaration
border-image
border-image-repeat
border-image-slice
border-image-source
border-image-width

 

 

Show:
© 2014 Microsoft