Skip to content
Related Articles

Related Articles

HTML | DOM Style outlineColor Property
  • Last Updated : 01 Aug, 2019

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 ouline in an element’s.

    Example-1:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    Before Clicking On Button:

    After Clicking On Button:

    Example-2 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

       
    <!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>

    chevron_right

    
    

    Output:

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

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

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img

    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :