This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

border-image-width

Summary

The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.

Overview table

Initial value
none
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, or as specified
Animatable
No
CSS Object Model Property
borderImageWidth
Percentages
Relative to the width, for horizontal effects, or the height, for vertical effects, of the border image area.

Syntax

  • border-image-width: <length>
  • border-image-width: <number>
  • border-image-width: <percentage>
  • border-image-width: auto

Values

<length>
Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative.
<percentage>
Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative.
<number>
Represents a multiple of the computed value of the element’s border-width property to be used as the image slice size. The number must not be negative.
auto
Indicates that the width, or height, of the image size must be the intrinsic size of that dimension.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-image-width 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-repeat: repeat;
    border-image-outset: 3;
}

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

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

/* Three-value syntax */
.pattern.three{
    border-image-width: 5% 15% 10%;
}

/* Four-value syntax */
.pattern.four{
    border-image-width: 5% 2em 10% auto;
}

View live example

Usage

 * Up to four different widths can be specified, in the following order: top, right, bottom, left.
  • If one width is specified, it is used for all four sides. If two widths are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three widths 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