In CSS, the Border Image Property is used to add Image Border to some Elements. You do not need to use any HTML code to call Border Images.
Syntax
#borderimg {
border: 15px solid transparent;
padding: 25px;
}
Value:-border-image-source
Description:- Border Image Source is used to set the image path.
Value:-border-image-slice
Description:-Border Image Slice is used to slice the Border Image.
Value:-border-image-width
Description:-Border Image Width is used to set the width of the Border Image.
Value:-border-image-repeat
Description:-Border Image Repeat is used to set the Border Image as Rounded, Repeated and Stretched.
Example
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Border Images</title>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 13px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 23px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 33px;
}
</style>
</head>
<body>
<p id="borderimg1">image boarder example</p>
<p id="borderimg2">image boarder example</p>
<p id="borderimg3">image boarder example</p>
</body>
</html>