CSS border-image-source Property

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(
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>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

Article Tags :

CSS

Web Technologies

CSS-Properties

Web technologies