Skip to content
Related Articles

Related Articles

CSS | border-image-source Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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. 

Default Value : Its default value is none.
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: 

HTML




<!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 12.0
  • Firefox 15.0
  • Internet Explorer 11.0
  • Opera 15.0
  • Safari 6.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!