Open In App

CSS border-image-width Property

Last Updated : 02 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

 



Previous Article
Next Article

Similar Reads

How to specify the width of the border image using CSS?
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 a
2 min read
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
CSS border-top-width Property
The border-top-width property in CSS is used to set a specific width to the top border of an element. The border-top-style or border-style property is used for the element before using the border-top-width property. Default Value: medium Syntax: border-top-width: length|thin|medium|thick|initial|inherit; Property Values: The border-top-width proper
2 min read
CSS border-left-width Property
The border-left-width Property is used to sets the width of the left-border of an Element.It is mandatory to declare the border-style or the border-left-style property before the border-left-color property. Syntax: border-left-width: medium|thin|thick|length|initial|inherit; Property Values: medium: It has a default value. It is used to specify a m
2 min read
CSS border-bottom-width Property
The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element. The border-bottom-style or border-style property is used for the element before using the border-bottom-width property. Syntax: border-bottom-width: length|thin|medium|thick|initial|inherit; Property Values: The border-bottom-width property v
2 min read
CSS border-right-width Property
The border-right-width property in CSS is used to set the width of right-border of an element. It is mandatory to declare the border-style or the border-right-style property before the border-right-width property. Syntax: border-right-width: medium|thin|thick|length|initial|inherit; Property Values: medium: It is the default value. It is used to sp
3 min read
CSS | border-block-start-width Property
The border-block-start-width property in CSS is used to define the individual logical block-start border property values in a single place in the style sheet. This property sets the border-width at the top of the defining element border. Syntax: border-block-start-width: border-width; Property values: border-width: This property holds the width of
1 min read
CSS | border-block-width Property
The border-block-width property in CSS is used to set the individual logical block border-width property values in a single place in the style sheet. It sets the border width top, and bottom of the defining border element. Syntax: border-block-width: width; Property values: width: This property holds the width of the border. Below examples illustra
1 min read
CSS | border-block-end-width Property
The border-block-end-width property in CSS is used to define the individual logical block-end border property values in a single place in the style sheet. This property sets the border-width at the bottom of the defining element border. Syntax: border-block-end-width: border-width; Property values: border-width: This property holds the width of the
1 min read
CSS | border-inline-width Property
The border-inline-width property in CSS is used to set the individual logical inline border-width property values in a single place in the style sheet. It sets the border width top, and bottom of the defining border element. Syntax: border-inline-width: width; Property values: width: This property holds the width of the border. Below examples illus
1 min read