CSS border-image-width Property
Last Updated :
23 Aug, 2024
The CSS 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 are specified, The first value is applied to 'the 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 the top, the cond is shared by both 'left and right', and The third to the bottom.
- If four values are given then they are applied to the 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 relatively.
- Percentage: is used to specify the width in terms of percentage.
- Number: is used to set the width as a multiple of the 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:
url('http://media.geeksforgeeks.org/wp-content/uploads/border2-2.png');
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:
url('http://media.geeksforgeeks.org/wp-content/uploads/border2-2.png');
border-image-slice: 30;
border-image-width: 10px 20px;
}
#geek2 {
border: 10px solid transparent;
padding: 10px;
border-image-source:
url('http://media.geeksforgeeks.org/wp-content/uploads/border2-2.png');
border-image-slice: 30;
border-image-width: 1.2rem;
}
#geek3 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url('http://media.geeksforgeeks.org/wp-content/uploads/border2-2.png');
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