How to specify the width of the border image using CSS?

In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property.

The 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 ‘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 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;

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to specify the width of
        the border image using CSS?
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            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>GeeksforGeeks</h1>

    <h3>
        How to specify the width of
        the border-image using CSS?
    </h3>

    <p id="geek1">GeeksforGeeks</p>

    <p id="geek2">GeeksforGeeks</p>

    <p id="geek3">GeeksforGeeks</p>

</body>

</html>

Output:

How to specify the width of the border image using CSS?

Explore