CSS border-image-outset Property

Description

The border-image-outset property specifies the amount by which the border image area extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

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

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