How to specify the width of the border image using CSS?
Last Updated :
30 Dec, 2020
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 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 the top, the 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;
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to specify the width of
the border image using CSS?
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
#geek1 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(
border-image-slice: 30;
border-image-width: 10px 20px;
}
#geek2 {
border: 10px solid transparent;
padding: 10px;
border-image-source:
url(
border-image-slice: 30;
border-image-width: 1.2rem;
}
#geek3 {
border: 10px solid transparent;
padding: 15px;
border-image-source:
url(
border-image-slice: 30;
border-image-width: 10% 20% 10% 20%;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
How to specify the width of
the border-image using CSS?
</ h3 >
< p id = "geek1" >GeeksforGeeks</ p >
< p id = "geek2" >GeeksforGeeks</ p >
< p id = "geek3" >GeeksforGeeks</ p >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...