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;
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
Please Login to comment...