Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 30 Dec, 2020
Improve Article
Save Article

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(
            border-image-slice: 30;
            border-image-width: 10px 20px;
        }
  
        #geek2 {
            border: 10px solid transparent;
            padding: 10px;
            border-image-source:
                url(
            border-image-slice: 30;
            border-image-width: 1.2rem;
        }
  
        #geek3 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source:
                url(
            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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!