CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS border-image property

This CSS property defines an image to be used as the element's border. It draws an image outside the element and replaces the element's border with the corresponding image. It is an interesting task to replace the border of an element with the image.

The border-image property can be applied to all elements except the elements of the internal table (such as tr, th, td) when border-collapse is set to collapse.

It is the shorthand property for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. We can set all these properties at once using the border-image property. If any of the values are not specified, then they set to their default values. The default value of this property is:

Syntax

The values of this property are tabulated as follows.

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 the border-image-source property. 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 corners Four sides, and a center region It can accept four unitless positive values. Its default value is 100%.
border-image-width:	It sets the width of the border-image. It can accept a unitless positive value, a percentage value, or the keyword auto. Its default value is 1. 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. stretch repeat round space The default value of this property is stretch.
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.

Now, let's see some of the examples to understand how to set the border-image using the border-image property.

Example

In this example, we are replacing the border of the paragraph elements with the image. In the first paragraph, we are specifying the single value (i.e., round) of the border-image-repeat property, whereas in the second paragraph, we are specifying two values (round, stretch) of it, the first value for the horizontal sides and second value for the vertical sides.

<!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 tutorialsinfo.com
</p>
<p id = "border1">
Welcome to the tutorialsinfo.com
</p>
</body>
</html>

Test it Now

Output

We can also specify the gradient as the border image.

Example - using linear-gradient

In this example we are using the linear-gradient and repeating-linear-gradient as the border image of the paragraph elements.

<!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 tutorialsinfo.com
</p>
<p id = "border1">
Welcome to the tutorialsinfo.com
</p>
<p id = "border2">
Welcome to the tutorialsinfo.com
</p>
</body>
</html>

Test it Now

Output

Example - using radial-gradient

In this example, we are using the radial-gradient as the border image of the paragraph elements.

<!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 tutorialsinfo.com
</p>
<p id = "border2">
Welcome to the tutorialsinfo.com
</p>
</body>
</html>

Test it Now

Output