CSS border-image-width property specifies the width of an element’s border image.
It can be specified using any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified using percentage(%) or an absolute number.
The border-image-width property can take 1 to 4 values at a time. Different number of values specified to the border-image-width property affects each border side differently. Let’s discuss each in detail:
If only one value is specified:
- border-image-width: val;
The same value(val) applies to all four border sides(i.e. top, right, bottom and left) of the element. Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-width: 30px;
}
If two values are specified:
- border-image-width: val1 val2;
The first value(val1) applies to the top and bottom border sides and the second value(val2) applies to the left and right border sides. Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-width: 30px 20px;
}
If three values are specified:
- border-image-width: val1 val2 val3;
The first value applies to the top border, the second value applies to the left and right borders and the third value applies to the bottom border. Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-width: 30px 20px 10px;
}
If all four values are specified:
- border-image: val1 val2 val3 val4;
The first value applies to the top border, the second value applies to the right border, the third value applies to the bottom border and the fourth value applies to left border. Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-image-width: 30px 20px 10px 25px;
}
Specify border-image-width Using an Absolute Number
The border-image-width property can also accept an absolute number. Here, border-image-width is calculated by multiplying the value specified by the border-width to the specified absolute number.
For example, if the element has border-width: 30px; and border-image-width: 0.8;
This means, the border-image-width will be 0.8*30px = 24px; Refer to the example below:
Example:
div{
border-image-source: url(images/border-diamonds.png);
border-width: 30px;
border-image-width: 0.8;
}
CSS Syntax
The border-image-width property has the below syntax:
border-image-width: length|%|number|auto|initial|inherit;
Property Values
The border-image-width property accepts the following values:
| length | Specifies the width of the image border in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| % | Specifies the width of the image border in percentage. The percentage value is calculated from the total area of the element. |
| number | The default value is 1. The width of the image border is calculated by multiplying the value of the border-width property with the specified number. |
| auto | If specified, the width of the image border is the intrinsic width or height (whichever is applicable) of the corresponding image slice. The image is sliced using the border-image-slice property. |
| initial | Sets the border-image-width property to its default value(1). |
| inherit | Inherits the border-image-width property from the parent element. |
General Info
| Default Value | 1 |
| Inherited | No |
| JavaScript Usage | element.style.borderImageWidth = “30px”; |
Related Pages
CSS Tutorial: CSS Borders
