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>