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

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

Last Updated : 30 Dec, 2020

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?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to set the width of the bottom border in CSS ?

In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS

How to set the width of the bottom border animatable using CSS ?

In this article, we will learn to set the width of the border-bottom animate using CSS. Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values The first is the name of the animation w

How to repeat border image using CSS ?

You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border.Syntax:border-image-repeat: stretch|repeat|round|initial|inheritNote: The border

How to Set Border Width in CSS?

The CSS border-width property is used to set the border of an element. This property allows you to specify the width of the border for all four sides of an element or individually for each side. Here, we will cover all possible approaches with detailed explanations and code examples. Table of Conten

How to set border width using jQuery ?

In this article, we will see how to set the border width using jQuery. To set the border width using jQuery, we will use css() method. This method is used to change the style property of the selected element. Syntax: $(selector).css(property, value) // Or $(selector).css({property: value, property: