Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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(
            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
Recommended Articles
Page :

Start Your Coding Journey Now!