Skip to content
Related Articles

Related Articles

Improve Article
CSS | border-image-source Property
  • Last Updated : 07 Aug, 2019

The 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;

Note: If the value is none, the border styles will be used. The specified image can be divided into regions with the help of border-image-slice property.

Values:



  • none: No image is specified.
  • image: Used to specify the path of the image to be used as the border of an element.
  • initial: Initializes the property with it’s default value.
  • inherit: It takes the value from the parent element.

Example:




<!DOCTYPE html>  
<html>  
    <head>  
        <title>
            CSS | border-image-source Property
        </title>
        <style>  
            body {  
                text-align:center; 
                color:green; 
            }  
                
            .border1 {  
                border: 10px solid transparent;  
                padding: 15px;  
                border-image-source: url(  
                border-image-repeat: round;  
                border-image-slice: 50;  
                border-image-width: 20px;  
            }   
             
        </style>  
    </head>  
    <body>  
        <h1>GeeksforGeeks</h1>  
        <h2>border-image-source property</h2>  
        <div class = "border1">GEEKSFORGEEKS</div>  
    </body
</html>     

Output:

Supported Browsers: The browsers supported by CSS | border-image-source Property are listed below:

  • Chrome 15.0
  • Edge 11.0
  • Firefox 15.0
  • Opera 15.0
  • Safari 6.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :