This CSS attribute specifies an image to be applied as the border of the element. It renders the image outside the element and substitutes the element's border with the specified image. It can be a fascinating challenge to exchange the element's border with an image.
The border-image property is applicable to all elements excluding the internal table elements (e.g., tr, th, td) when the border-collapse property is set to collapse.
It serves as a shorthand for the border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties. By utilizing the border-image property, we can conveniently define all these attributes simultaneously. In cases where specific values are not provided, they will automatically revert to their default settings. The default value assigned to this property is:
border-image: none 100% 1 0 stretch
Syntax
border-image: source slice width outset repeat | initial | inherit;
The values for this attribute are listed in the table below.
| Values | Description |
|---|---|
| border-image-source: | It specifies the source of the border-image. It sets the path of the image, or we can say that it specifies the location of the image to be used as the border. |
| border-image-slice: | It is used to divide or slice the image, which is specified by theborder-image-sourceproperty. The values of this property specify how to slice the image for creating the pieces of the border. This property divides the image into nine sections that are:Four cornersFour sides, anda center regionIt can accept four unitless positive values. Its default value is100%. |
| border-image-width: | It sets the width of the border-image. It can accept a unitless positive value, a percentage value, or the keywordauto. Its default value is1. We can specify up to four values for providing the width of individual sides. |
| border-image-outset: | It sets the amount of space by which the border image is set out from its border box. |
| border-image-repeat: | It controls the repetition of the image to fill the area of the border. We can specify up to two values for this property. If we specify one value, then it is applied on both vertical and horizontal sides. But if we specify two values, then the first value is applied on horizontal sides, and the second value is applied on vertical sides.The values of this property are listed below.stretchrepeatroundspaceThe default value of this property isstretch. |
| Initial | It sets the property to its default value (border-image:none 100% 1 0 stretch ). |
| inherit | It inherits the property from its parent element. |
- Four corners
- Four sides, and
- a center region
- stretch
- repeat
- round
- space
Now, let's explore some instances to grasp the process of defining the border-image utilizing the border-image attribute.
Example
In this instance, we are substituting the border of the block elements with an image. Initially, we define a singular value (e.g., round) for the border-image-repeat attribute in the first block, while in the subsequent block, we define two values (round, stretch) for it - the initial value applies to the horizontal edges and the second value to the vertical edges.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border: 10px solid transparent;
padding: 15px;
text-align:center;
font-size: 25px;
color: darkviolet;
}
#border {
border-image: url('border.png') 60 / 20px 20px round;
}
#border1 {
border-image: url('diamond.png') 43 / 10px 15px round stretch;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border">
Welcome to the C# Tutorial
</p>
<p id = "border1">
Welcome to the C# Tutorial
</p>
</body>
</html>
Output
We also have the option to define the gradient as the border image.
Example - using linear-gradient
In this instance, we are employing the linear-gradient and repeating-linear-gradient to define the border image for the paragraph components.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border: 10px solid transparent;
padding: 15px;
text-align:center;
font-size: 25px;
color: darkviolet;
}
#border {
border-image: url('diamond.png') 40 round stretch;
}
#border1 {
border-image: linear-gradient(orange, yellow, green) 40 / 30px 10px stretch;
}
#border2 {
border-image: repeating-linear-gradient(50deg, blue, yellow, lightgreen 20px) 30 / 20px 30px round;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border">
Welcome to the C# Tutorial
</p>
<p id = "border1">
Welcome to the C# Tutorial
</p>
<p id = "border2">
Welcome to the C# Tutorial
</p>
</body>
</html>
Output
Example - using radial-gradient
In this instance, we are employing the radial-gradient as the border image for the paragraph components.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border: 10px solid transparent;
padding: 15px;
text-align:center;
font-size: 25px;
color: darkviolet;
}
#border1 {
border-image: radial-gradient(circle, yellow, magenta, blue) 30 / 15px repeat;
}
#border2 {
border-image: radial-gradient(farthest-side, red, yellow, green) 30 / 15px round;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border1">
Welcome to the C# Tutorial
</p>
<p id = "border2">
Welcome to the C# Tutorial
</p>
</body>
</html>
Output