Skip to content
Related Articles

Related Articles

CSS | border-image-width Property

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Jun, 2022
View Discussion
Improve Article
Save Article

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;

Default Value : Its default value is 1. 

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: 
 

html




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

html




<!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 12.0
  • Internet Explorer 11.0
  • Firefox 13.0
  • Opera 15.0
  • Apple Safari 6.0

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!