CSS border-image-width Property

The border-image-width property specifies the width of the border image.

The CSS border-image-width Property is used to set width of border image. It can be set by providing multiple values.

If only one value is provided, it is applied to all four sides.
When two values are specified, The first value is applied to ‘top and bottom’ and The second value is applied to the ‘left and right’.
When three values are specified, The first value is given to top, Second is shared by both ‘left and right’ and The third to the bottom.
If four values are given then they are applied to top, right, bottom and left (clockwise) order.

Syntax:

border-image-width: number | % | auto | initial | inherit;

Property Values:

Length : is used to specify the value in relative manner.
Percentage : is used to specify the width in terms of percentage.
Number : is used to set the width as a multiple of corresponding computed value of border-width
Initial : sets this property to its default value
Inherit : is used to inherit the values from the parent elements

Note: The border-image-width property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

Example -

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg1 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: round;
  border-image-slice: 30;
  border-image-width: 10px;    
}

#borderimg2 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: round;
  border-image-slice: 30;
  border-image-width: 20px;    
}

#borderimg3 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(/css/images/border1.png);
  border-image-repeat: round;  
  border-image-slice: 30;
  border-image-width: 30px;    
}
</style>
</head>
<body>

<h1>The border-image-width Property</h1>

<p>The border-image-width property specifies the width of the border image:</p>
<p id="borderimg1">border-image-width: 10px;</p>
<p id="borderimg2">border-image-width: 20px;</p>
<p id="borderimg3">border-image-width: 30px;</p>

<p>Here is the original image:</p>
<img src="/css/images/border1.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image-width property.</p>

</body>
</html>