By using the CSS border-image property you can define an image to be used as the border around an element.
The CSS border-image property is a shorthand property for:
Syntax:
border-image: source slice width outset repeat;border-image-source – defines the path to the image to be used as a border.
border-image-slice – defines how to slice the image defined by the CSS border-image-source.
border-image-width – defines the width of the border-image.
border-image-outset – defines the amount by which the border-image area extends beyond the border-box.
border-image-repeat – defines whether the border-image should be repeated, rounded or stretched.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg-1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) 30 round;
}
#borderimg-2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png) 60 stretch;
}
</style>
</head>
<body>
<p id="borderimg-1">The image tiles to fill the area. The image is re-scaled if necessary, to avoid dividing tiles.</p>
<p id="borderimg-2">The image is stretched to fill the area.</p>
</body>
</html>Output:
The image tiles to fill the area. The image is re-scaled if necessary, to avoid dividing tiles.
The image is stretched to fill the area.
The original image:
Enjoy coding!
Read also: