CSS border-image-width Property

Last Updated : 23 Aug, 2024

The CSS border-image-width Property is used to set the width of the 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 ‘the 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 the top, the cond is shared by both ‘left and right’, and The third to the bottom.
If four values are given then they are applied to the 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 relatively.
Percentage: is used to specify the width in terms of percentage.
Number: is used to set the width as a multiple of the 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>