Open In App
Related Articles

HTML | DOM Style outlineColor Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 Jun, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials