CSS - border-image-source Property

Quiz

CSS border-image-source property specifies the path of the image that will be used as a border to an element. If none value is used or the image cannot be displayed then the border style is applied to the border.

Syntax

border-image-source: none | image | initial | inherit;

Property Values

Value	Description
none	It represents no image will be used as a border.
image	It represents the path of the image to be used as a border.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Image Source Property

The following examples explain the border-image-source property with different values.

Border Image Source Property with None Value

To not apply any image as the border of an element, we use the none value. The none value applies border style to the border. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 20px solid;
            border-image-source: none;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-source property
    </h2>
    <div class="box">
        <p>
            Border-image-source 
            property with none value 
        </p>
    </div>
</body>

</html>

Border Image Source Property with Image Path

To set an image as the border of an element, we specify the path of the image to the border-image-source property. The specified image will be applied to the border. In the following example, a white flower image has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 20px solid red;
            border-image-source: url(/css/images/white-flower.jpg);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-source property
    </h2>
    <div class="box">
        <p>
            Border-image-source 
            property with image
        </p>
    </div>
    <p>
        Image used:
    </p>
    <img src="/css/images/white-flower.jpg" 
    alt="white-flower" height=150>
</body>

</html>

Supported Browsers

Property
border-image-source	15.0	11.0	15.0	6.0	15.0

css_reference.htm

Print Page