CSS Property: border-image-width
Border image drawing area. The width within a border that an image is painted in.
Set by establishing inner-offsets from the top, right, bottom, and left edges of a border. If the border’s image width is wider than the border’s width (set by border-width
), the border image will spill over the border’s boundary and leak into the box’s padding and content areas.
Possible Values
Value | Description | Example |
---|---|---|
[length] | Top, right, bottom, and left offset. Should not be negative. | 10px |
[percentage] | Top, right, bottom, and left offset. Calculated in relation to the border image area. Should not be negative. | 25% |
[number] | Top, right, bottom, and left offset. A multiple of the computed border width. Should not be negative. | 1.2 |
auto | Top, right, bottom, and left offset. Equates to the width of the corresponding border-image-slice . If this isn’t applicable, it equates to the border width. | |
[value] [value] | First value is top and bottom offset. Second value is right and left offset. | 25% 10% |
[value] [value] [value] | First value is top offset. Second value is right and left offset. Third value is bottom offset. | 1.2 0.8 0.5 |
[value] [value] [value] [value] | First value is top offset. Second value is right offset. Third value is bottom offset. Fourth value is left offset. | 5px 10px 15px 20px |
inherit |
Example
aside {
border: 10px solid fuchsia;
border-image-source: url("fluffy.png");
border-image-width: 5px;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
- The border image is painted in the outer 5 pixels of the border area. */