CSS | border-image-width Property

The CSS border-image-width Property is used to set width of 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 top, 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;

Property Values:



  • Length : is used to specify the value in relative manner.
  • Percentage : is used to specify the width in terms of percentage.
  • Number : is used to set the width as a multiple of 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: 
            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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers: The browser supported by border-image-width Property are listed below:

  • Google Chrome 15.0
  • Edge 11.0
  • Firefox 13.0
  • Opera 15.0
  • Apple Safari 6.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.