This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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(http://docs.webplatform.org/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

See also

Related articles

Border

Other articles

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article