HTML - DOM Style Object outlineWidth Property

Quiz

HTML DOM Style Object outlineWidth property sets or returns the outline width of the element.

Syntax

Set the outlineWidth property:

object.style.outlineWidth= "thin | medium | thick | length | initial | inherit";

Get the outlineWidth property:

object.style.outlineWidth;

Property Values

Value	Description
thin	It specifies a thin outline.
medium	It is default value which specifies a medium outline.
thick	It specifies a thick outline.
length	It specifies outline width in CSS measurement units like px.
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 outline width of an element.

Examples of HTML DOM Style Object 'outlineWidth' Property

The following examples illustrates how to set and get the outline width values.

Set the Outline Width of div Element

The following example sets the outline width of div element to thin, thick and 10px.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineWidth Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: medium solid #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Thin Outline</button>
    <button onclick="funtwo()">Thick Outline</button>
    <button onclick="funthree()">Set Width</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineWidth = "thin";
        }
        function funtwo() {
            document.getElementById("outline")
                .style.outlineWidth = "thick";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineWidth = "10px";
        }
    </script>
</body>
</html>

Get the Outline Width of div Element

The following example gets the outline width of div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineWidth Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: medium solid #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Thin Outline</button>
    <button onclick="funtwo()">Thick Outline</button>
    <button onclick="funthree()">Set Width</button>
    <br><br><br>
    <p id="result"></p>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>    
    <script>
        function fun() {
            let x=document.getElementById("outline")
                .style.outlineWidth = "thin";
            document.getElementById("result")
                .innerHTML="Outline Width :" +x;
        }
        function funtwo() {
            let x=document.getElementById("outline")
                .style.outlineWidth = "thick";
            document.getElementById("result")
                .innerHTML="Outline Width :" +x;
        }
        function funthree() {
            let x=document.getElementById("outline")
                .style.outlineWidth = "10px";
            document.getElementById("result")
                .innerHTML="Outline Width :" +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
outlineWidth	Yes 1	Yes 12	Yes 1.5	Yes 1.2	Yes 7

html_dom.htm

Print Page