HTML - DOM Style Object borderImageOutset Property

Quiz

HTML DOM Style Object borderImageOutset Property specifies the border image area amount by which it extends beyond the border box.

Syntax

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

Set the borderImageOutset property:

object.style.borderImageOutset= "length | number | initial | inherit";

Get the borderImageOutset property:

object.style.borderImageOutset;

Property Values

Value	Description
length	It specifies the distance image will extend from border box. It accepts upto 4 values that is one for each side. If fourth values is ommited it's value will be same as second, if third values is ommited it's value will be same as first, if second values is ommited it's value will be same as first.
number	It specifies multiple of border width. It accepts a decimal value.
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 outset property of an element.

Examples of HTML DOM Style Object 'borderImageOutset' Property

The following examples illustrates to add and set the border image outset for each side.

Add Border Image Outset

The following example adds the border image outset.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageOutset Property
    </title>
    <style>
        #outset {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/tensorflow/images/tensorflow.jpg") 30 round;
            border-image-outset: 5px;
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <p>Change Outset</p>
    <button onclick="fun()">
        Change Border Outset
    </button>
    <br><br><br>
    <p id="outset">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("outset")
                .style.borderImageOutset = "20px";
        }
    </script>
</body>
</html>

Set Border Image Outset for Each Side

The following example sets the border image outset for each side according to the button clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageOutset Property
    </title>
    <style>
        #outset {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/tensorflow/images/tensorflow.jpg") 30 round;
            border-image-outset: 5px;
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <p>Change Outset</p>
    <button onclick="fun()">Change</button>
    <button onclick="funTwo()">Two</button>
    <button onclick="funThree()">Three</button>
    <button onclick="funFour()">Four</button>
    <br><br><br>
    <p id="outset">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("outset")
                .style.borderImageOutset = "20px";
        }
        function funTwo() {
            document.getElementById("outset")
                .style.borderImageOutset = "20px 10px";
        }
        function funThree() {
            document.getElementById("outset")
                .style.borderImageOutset = "20px 10px 30px";
        }
        function funFour() {
            document.getElementById("outset")
                .style.borderImageOutset = "20px 10px 30px 40px";
        }
    </script>
</body>
</html>

Set Border Image Outset using 'number'

The following example sets the border image outset using number property value which takes a decimal number.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageOutset Property
    </title>
    <style>
        #outset {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/tensorflow/images/tensorflow.jpg") 30 round;
            border-image-outset: 5px;
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <p>Change Outset</p>
    <button onclick="fun()">Change</button>
    <br><br><br>
    <p id="outset">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("outset")
                .style.borderImageOutset = "2.3";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderImageOutset	Yes 15	Yes 12	Yes 11	Yes 6	Yes 15

html_dom.htm

Print Page