HTML - DOM Style Object borderImageSource Property

Quiz

HTML DOM Style Object borderImageSource property is used to set or return the source of the image to be used as border image for an element.

Syntax

Given below are the syntax to get or set the borderImageSource property.

Set the borderImageSource property:

object.style.borderImageSource= "none | image | initial | inherit";

Get the borderImageSource property:

object.style.borderImageSource;

Property Values

Value	Description
none	It is the default value which means no border image will be used. Border styles will be used instead if they are specified.
image	It represents path of the image to be used as border image.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border image repeat source of an element.

Example of HTML DOM Style Object 'borderImageSource' Property

In the following example we have added a border image using borderImageSource property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageSource Property
    </title>
    <style>
        #source {
            border: 20px solid transparent;
            margin: 20px;
            border-image: 30 round;
        }
    </style>
</head>
<body>
    <p>Click to add image</p>
    <button onclick="fun()">Add</button>
    <br><br><br>
    <p id="source">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <p id="ex"></p>
    <script>
        function fun() {
            document.getElementById("source")
                .style.borderImageSource = 
                    "url(/images/blockchain.png)";
            document.getElementById("ex").innerHTML=x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImageSource	Yes 15	Yes 12	Yes 15	Yes 6	Yes 15

html_dom.htm

Print Page