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: