HTML - DOM Style Object outlineStyle Property

Quiz

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
outlineStyle	Yes 1	Yes 12	Yes 1.5	Yes 1.2	Yes 7

html_dom.htm

Print Page