border-image-outset

Summary

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

Overview table

Initial value: 0
Applies to: all elements, except internal table elements when border-collapse is set to collapse.
Inherited: No
Media: visual
Computed value: all length made absolute, otherwise as specified
Animatable: No
CSS Object Model Property: borderImageOutset
Percentages: N/A

Syntax

border-image-outset: <length>
border-image-outset: inherit

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). For more information about the supported length units, see CSS Values and Units Reference (Length). This length must not be negative.
inherit: Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-image-outset properties applied to them.

<div class="pattern one">one</div>
<div class="pattern two">two</div>
<div class="pattern three">three</div>
<div class="pattern four">four</div>

View live example

/* This general class will apply the pattern to the containers */
.pattern {
    border-image-source: url(/docs/w/images/d/d8/border-image.png);
    border-image-slice: 30;
    border-image-width: 6;
    border-image-repeat: repeat;

}

/* One-value syntax */
.pattern.one{
    border-image-outset: 3;
}

/* Two-value syntax */
.pattern.two{
    border-image-outset: 1.2em 1.8em;
}

/* Three-value syntax */
.pattern.three{
    border-image-outset: 5px 3px 10px;
}

/* Four-value syntax */
.pattern.four{
    border-image-outset: 5 2em 10 3px;
}

View live example

Usage

 * Up to four different values can be specified, in the following order: top, right, bottom, left.

If one value is specified, it is used for all four sides. If two values are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three values are specified, they are used for top, right/left, and bottom borders, respectively. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: W3C Candidate Recommendation

Attributions

Mozilla Developer Network : Article