Skip to content
Related Articles

Related Articles

Improve Article
CSS | border-image-width Property
  • Last Updated : 07 Aug, 2019

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:




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

Output:



Example 2:




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

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