HTML - DOM Style Object borderImageWidth Property

Quiz

HTML DOM Style Object borderImageWidth property sets or returns the width of image border. It's default value is 1.

Syntax

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

Set the borderImageWidth property:

object.style.borderImageWidth= "length | number | percentage | auto | initial | inherit";

Get the borderImageWidth property:

object.style.borderImageWidth;

Property Values

Value	Description
length	It specifies the border width in px.
number	It specifies multiples of corresponding border width. It's default value is 1.
percentage	It represents border image area where horizontal offset for width and vertical offset for height is specified.
auto	It sets width of the border equals to intrinsic width or height of the corresponding image slice.
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 width property of an element.

Examples of HTML DOM Style Object 'borderImageWidth' Property

The following examples illustrates to add, chnage and get the borderImageWidth property.

Add Border Image Width

The following example adds a border image width and gets the width value.

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

Set Border Image Width

In the following example we have set the border image width value to auto and percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageWidth Property
    </title>
    <style>
        #width {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
            border-image-width: 10px 40px;
        }
    </style>
</head>
<body>
    <p>Click to change Width</p>
    <button onclick="fun()">
        Change in Percentage
    </button>
    <button onclick="funTwo()">Auto</button>
    <br><br><br>
    <p id="width">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <p id="ex"></p>
    <script>
        function fun() {
            let x=document.getElementById("width")
                .style.borderImageWidth = "15% 25%";
            document.getElementById("ex").innerHTML=x;
        }
        function funTwo() {
            let x=document.getElementById("width")
                .style.borderImageWidth = "auto";
            document.getElementById("ex").innerHTML=x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImageWidth	Yes 15	Yes 12	Yes 13	Yes 6	Yes 15

html_dom.htm

Print Page