Open In App

HTML | DOM Style outlineColor Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

  • Before clicking On Button:
  • After Clicking On Button:

Supported Browsers: The browser supported by DOM Style outlineColor Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 8 and above
  • Firefox 1.5 and above
  • Opera 7 and above
  • Safari 1.2 and above


Last Updated : 10 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads