HTML - DOM Style Object outlineColor Property

Quiz

HTML DOM Style Object outlineColor property sets or returns the outline color around an element.

Syntax

Set the outlineColor property:

object.style.outlineColor= "color | invert | initial | inherit";

Get the outlineColor property:

object.style.outlineColor;

Property Values

Value	Description
color	It specifies the outline color.
invert	It sets outline color to inverse color of background color to make it always visible. All browsers may not support this 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 color of an element.

Example of HTML DOM Style Object 'outlineColor' Property

The following example sets outline color of p element.

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

Supported Browsers

Property
outlineColor	Yes 1	Yes 12	Yes 1.5	Yes 1.2	Yes 7

html_dom.htm

Print Page