Open In App
Related Articles

CSS border-image-source Property

Improve Article
Save Article
Like Article

The border-image-source property is used to specify the image source which is to be set as the border of an element. 


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.

  • 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.



<!DOCTYPE html>
        CSS | border-image-source Property
        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;
    <h2>border-image-source property</h2>
    <div class="border1">GEEKSFORGEEKS</div>


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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 09 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials