HTML - DOM Style Object borderImage Property

Quiz

HTML DOM Style Object borderImage property sets or returns border image of an element. It is a shorthand property for setting five other properties which are: borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset and borderImageRepeat.

Syntax

Set the borderImage property:

object.style.borderImage= "source | slice | width | outset | repeat | initial | inherit";

Get the borderImage property:

object.style.borderImage;

Property Values

Value	Description
borderImageSource	It specifies the image path to be used as a border. It's default value is none.
borderImageSlice	It specifies the inward offsets of image-border. It's default value is 100%.
borderImageWidth	It specifies the width of image border. It's default value is 1.
borderImageOutset	It specifies the border image area amount by which it extends beyond the border box. It's default value is 0.
borderImageRepeat	It specifies whether the image-border should be rounded,repeated or stretched. It's default value is stretch.
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 property of an element.

Examples of HTML DOM Style Object 'borderImage' Property

The following examples illustrates how to add and change the border image.

Add a Border Image

The following example illustrates how to add a border image to an element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML - DOM Style Object borderImage Property
    </title>
    <style>
        #image {
            border: 15px solid transparent;
            padding: 12px;
            width: 100px;
        }
    </style>
</head>
<body>
    <p>
        Click to add the border image
    </p>
    <button onclick="fun()">
        Add Border Image
    </button>
    <div id="image">
        This is a sample paragraph. 
        Here is another line.
    </div>
    <script>
        function fun() {
            document.getElementById("image").style.borderImage =
                "url('/images/blockchain.png') 20 round";
        }
    </script>
</body>
</html>

Change the Border Image

The following example illustrates how to change the existing border image of an element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML - DOM Style Object borderImage Property
    </title>
    <style>
        #image {
            border: 15px solid transparent;
            padding: 12px;
            border-image: url("/images/blockchain.png") 20 stretch;
            width: 100px;
        }
    </style>
</head>
<body>
    <p>
        Click to chnage the border image
    </p>
    <button onclick="fun()">
        Change Border Image
    </button>
    <div id="image">
        This is a sample paragraph. 
        Here is another line.
    </div>
    <script>
        function fun() {
            document.getElementById("image").style.borderImage =
                "url('/images/mongodb.png') 20 round";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImage	Yes 16	Yes 12	Yes 15	Yes 6	Yes 11

html_dom.htm

Print Page