How to create an image as the border around an element?

Last Updated : 14 Aug, 2020

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> 