HTML | DOM Style outlineColor Property

Last Updated : 10 Jun, 2022

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>