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 tocollapse
. - 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>
/* 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;
}
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
border-image-width
Other articles
Attributions
Mozilla Developer Network : Article