CSS border-image-outset Property

Example

Place the border image 10 pixels outside the border edges of an element:

#borderimg {
  border-image-source: url(border.png);
  border-image-outset: 10px;
}

Definition and Usage

The border-image-outset property specifies the amount by which the border image area extends beyond the border box.

Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties).

Default value:	0
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.borderImageOutset="10px"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which border-image-outset is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-image-outset	15.0	11.0	15.0	6.0	15.0

CSS Syntax

border-image-outset: length|number|initial|inherit;

Note: The border-image-outset property can take from one to four values (top, right, bottom, and left sides). 

• If the fourth value is omitted, it is the same as the second. i.e. (20px 10px 15px is same as 20px 10px 15px 10px)
• If the third one is also omitted, it is the same as the first. i.e. (20px 10px is same as 20px 10px 20px 10px)
• If the second one is also omitted, it is the same as the first. (20px is same as 20px 20px 20px 20px)

Property Values

Value	Description	Play it
length	A length unit specifying how far from the edges the border-image will appear. Default value is 0
number	Represent multiples of the corresponding border-width
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.