CSS border-image-width property
The border-image-width property in CSS is identified for setting the width of the border-image of an element. If the value of this property is greater than the border-width of the element, then the border image will get extended beyond the padding or the content edge.
The border-image-width property can be specified using one, two, or three or four values, chosen from the list of values like if one value is specified, the property is applicable to the same width to all the four sides, if two values are specified, the first width is applicable to the top and bottom, the second one to the left and right sides, if three values are specified, the first width is applicable to the top, the second one to the left and right sides while the third one to the bottom and if four values are specified, the widths are applicable to the top, right, left and bottom sides in the clockwise order.
Syntax for border-image-width property:
Following is the syntax for the border-image-width property.
border-image-width: number|%|auto|initial|inherit;
CSS border-image-width property values:
Let's see what values this property can have and what do those values do:
| Value |
Description |
| length-percentage |
This value asserts the width of the border, which is specified as a percentage or a length. Percentages are related to the width of the border image area for the horizontal offsets and the height of the border image area for the vertical offsets. And none of these values should be negative. |
| number |
This value asserts the width of the border, which is specified as a multiple of the corresponding border-width. And none of the values should be negative. |
| auto |
In this case, the width of the border is made equal to its intrinsic height or width, of the corresponding border-image-slice. |
Example: CSS border-image-width property
Here in the example below, we are using the border-image-width property with different border images, colors, and their different values. In this case, we have given the border-image-width value using the 'length' value i.e; 16 px. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-image-width property in CSS</title>
<style type="text/css">
p {
border: 20px solid;
border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
border-image-width: 16px;
padding: 40px;
}
</style>
</head>
<body>
<p>Study Tonight is the best place to learn digital in a simplified way. Here you are able to understand the things in a very easy way.</p>
</body>
</html>
Output:
Example 2: CSS border-image-width property
Here in the example below, we are using the border-image-width property with different border images, colors, and their different values. In this case, we have given the border-image-width value using the 'auto' value. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-image-width property in CSS</title>
<style type="text/css">
p {
border: 20px solid;
border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
border-image-width: auto;
padding: 40px;
}
</style>
</head>
<body>
<p>Study Tonight is the best place to learn digital in a simplified way. Here you are able to understand the things in a very easy way.</p>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
15 |
15 |
| Edge |
12 |
12 |
| Firefox |
13 |
13 |
| Internet Explorer |
11 |
11 |
| Opera |
15 |
15 |
| Safari |
6 |
6 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
14 |
14 |
| Opera Android |
14 |
14 |
| IOS Safari |
6 |
6 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-image-source property in CSS is one. This property is applicable to all elements except for the internal table elements in case if the border-collapse value is collapse. And it is also applicable to the ::first-letter. It is not an inherited property. Percentage values refer to the width or height of the area of the border-image. The computed value for this property is the specified one. The animation type for this property is by the computed value type itself.
