HTML | DOM Style outlineColor Property

The DOM Style outlineColor Property is used to sets or returns the color of the outline around an Element.

Syntax:

It is used to Return the outlineColor property

object.style.outlineColor

it is used to Set the outlineColor property

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

Property Values:

color: It sets the outline color to any valid CSS color.
invert: It set the outline color to a color which is inverse of the background, which ensures the outline will always be visible. Note: It is not supported by all browsers.
Inherit: It sets the outline color according to outline-color property inherited from its parent element.

Return Value: It returns a string value which represent the color of the outline in an element’s.

Example-1:

html

<!DOCTYPE html>

<html>
 
<head>

    <title>

        HTML | DOM Style outlineColor Property

    </title>

    <style>

        #myDiv {

            border: 1px solid red;

            outline: green dotted thick;

        }

    </style>

</head>
 
<body>

    <h1> Geeks for Geeks</h1>

    <h2>HTML | DOM Style outlineColor Property</h2>
 
    <div id="myDiv">Welcome to Geeks for Geeks.</div>

    <br>

    <button type="button" onclick="myFunction()">

        Click Here!

    </button>
 
    <script>

        function myFunction() {

            //  Set outline color. 

            document.getElementById("myDiv")

                .style.outlineColor = "red";

        }

    </script>
 
</body>
 
</html>

Output: Before Clicking On Button:

After Clicking On Button:

Example-2 :

html

<!DOCTYPE html>

<html>
 
<head>

    <title>

        HTML | DOM Style outlineColor Property

    </title>

    <style>

        #myDiv {

            border: 1px solid red;

            outline: dotted thick;

        }

    </style>

</head>
 
<body>

    <h1> Geeks for Geeks</h1>

    <h2>HTML | DOM Style outlineColor Property</h2>
 
    <div id="myDiv" style="outline-color:green;">

      Welcome to Geeks for Geeks.</div>

    <br>

    <button type="button" onclick="myFunction()">

        Click Here!

    </button>
 
    <script>

        function myFunction() {

            alert(document.getElementById(

              "myDiv").style.outlineColor);

        }

    </script>
 
</body>
 
</html>