CSS border-image-width Property

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;

Default Value : Its default value is 1.

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

Example 1:

html

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS|border-image-width Property</title>
    <style>
        h1,
        h2 {
            color: green;
        }
          
        #gfg {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: 
        url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
        }
    </style>
</head>
  
<body>
    <h1 id="gfg">GeeksForGeeks</h1>
    <h2 id="gfg">CSS|border-image-width Property</h2>
  
</body>
  
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS|border-image-width Property</title>
    <style>
        h1,
        h2 {
            color: green;
        }
          
        #geek1 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: 
        url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-slice: 30;
            border-image-width: 10px 20px;
        }
          
        #geek2 {
            border: 10px solid transparent;
            padding: 10px;
            border-image-source: 
         url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-slice: 30;
            border-image-width: 1.2rem;
        }
          
        #geek3 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: 
         url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
            border-image-slice: 30;
            border-image-width: 10% 20% 10% 20%;
        }
    </style>
</head>
  
<body>
    <h1 id="gfg">GeeksForGeeks</h1>
    <h2 id="gfg">CSS|border-image-width Property</h2>
    <p id="geek1"> Geek one </p>
  
  
    <p id="geek2"> Geek two </p>
  
  
    <p id="geek3" style="text-align:center"> Geek three </p>
  
  
  
</body>
  
</html>
                         