How to create an image as the border around an element?
The task is to create an image as the border around an element. The approach of this article is to create an image as a border around an element border-image-source property is used to specify the image source which is to be set as the border of an element.
Syntax:
border-image-source: url(image-path.png) | none | initial | inherit;
Example:
<!DOCTYPE html><html> <head> <title>Create an image as the border around an element </title> <style> body { text - align : center; color: green; } .border1 { border: 10px solid transparent; padding: 15px; border-image-source: url(https:// media.geeksforgeeks.org/wp-content/uploads/border1-2.png); border-image-repeat: round; border-image-slice: 50; border-image-width: 20px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>How to create an image as the border around an element?</h2> <div class="border1">HeloloGEEKSFORGEEKS</div> </body></html> |
Output:
Supported Browsers are listed below:
- Chrome 15.0
- Edge 11.0
- Firefox 15.0
- Opera 15.0
- Safari 6.0
