HTML - DOM Style Object outlineStyle Property



HTML DOM Style Object outlineStyle property sets or returns the outline style around an element.

Syntax

Set the outlineStyle property:
object.style.outlineStyle= "value| initial | inherit";
Get the outlineStyle property:
object.style.outlineStyle;

Property Values

Value Description
none It is default value which specifies no outline.
hidden It specifies outline to turn off.
dotted It specifies a dotted outline.
dashed It specifies a dashed outline.
solid It specifies a solid outline.
double It defines a double outline in which two lines are used as outline and it's width is same as specified by outlineWidth.
groove It specifies a 3D grooved outline whose effect depends on the outline-color value.
ridge It specifies a 3D grooved outline whose effect depends on the outline-color value.
inset It specifies a 3D inset outline whose effect depends on the outline-color value.
outset It specifies a 3D outset outline whose effect depends on the outline-color 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 which represents outline style of an element.

Examples of HTML DOM Style Object 'outlineStyle' Property

The following examples sets outline style of div element.

Set Outline Style of div Element

The following example sets the outline style of div element to dashed, solid and dotted.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Dashed</button>
    <button onclick="funtwo()">Solid </button>
    <button onclick="funthree()">Dotted</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "dashed";
        }
        function funtwo() {
            document.getElementById("outline")
                .style.outlineStyle = "solid";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "dotted";
        }
    </script>
</body>
</html>

Set Outline Style to 'double', 'groove' and 'ridge'

The following example sets the outline style of div element to double, groove and ridge.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Double</button>
    <button onclick="funtwo()">Groove</button>
    <button onclick="funthree()">Ridge</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "double";
        }
        function funtwo() {
            document.getElementById("outline")
                .style.outlineStyle = "groove";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "ridge";
        }
    </script>
</body>
</html>

Set Outline Style to 'inset' and 'outset'

The following example sets the outline style of div element to inset and outset.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object outlineStyle Property
    </title>
    <style>
        #outline {
            border: 2px solid yellow;
            outline: 2px #04af2f;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Inset</button>
    <button onclick="funthree()">Outset</button>
    <br><br><br>
    <div id="outline">
        Welcome to Tutorials Point...
    </div>
    <script>
        function fun() {
            document.getElementById("outline")
                .style.outlineStyle = "inset";
        }
        function funthree() {
            document.getElementById("outline")
                .style.outlineStyle = "outset";
        }
    </script>
</body>
</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
outlineStyle Yes 1 Yes 12 Yes 1.5 Yes 1.2 Yes 7
html_dom.htm
Advertisements