Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style outlineStyle Property

  • Last Updated : 01 Aug, 2019

The Style outlineStyle property in HTML DOM is used to set or return the style of the outline around an element.
Syntax:

  • It is used to return the outlineStyle property.
    object.style.outlineStyle
  • It is used to set the outlineStyle property.
    object.style.outlineStyle = value

    :

    Property Values:

  • none: This is the default value that sets no outline.
  • hidden: Using this value,the outline is turned off.
  • dotted: This value sets a dotted outline.
  • dashed: This value sets a dashed outline.
  • solid; This value sets a solid outline.
  • double; This value sets a double outline.
  • groove; This value sets a 3D grooved outline.
  • ridge; This value sets a 3D ridged outline.
  • inset; This value sets a 3D inset outline.
  • outset; This value sets a 3D outset outline.
  • initial; This value sets the outline property to its browser’s default value.
  • inherit: This value sets the outline property to the value from its parent element.

    Return Value: This method returns a String value representing the style of an element’s outline.

    Example 1:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style outlineStyle Property
        </title>
        <style>
            #myDiv {
                border: 1px solid red;
                outline: green dotted thick;
            }
        </style>
    </head>
      
    <body>
        <h1> Geeks for Geeks</h1>
        <h2>HTML | DOM Style outlineStyle Property</h2>
      
        <div id="myDiv">Welcome to Geeks for Geeks.</div>
        <br>
        <button type="button" onclick="myFunction()">
            Click Here!
        </button>
      
        <script>
            function myFunction() {
                document.getElementById("myDiv")
                    .style.outlineStyle = "solid";
            }
        </script>
      
    </body>
      
    </html>

    Output:



    • Before click on the button:

    • After click on the button:

    Example 2:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style outlineStyle Property
        </title>
        <style>
            #myDiv {
                border: 1px solid red;
            }
        </style>
    </head>
      
    <body>
      
        <h1> HTML | DOM Style outlineStyle Property</h1>
      
        <div id="myDiv">Welcome to Geeks for Geeks.</div>
        <br>
        <button type="button" onclick="myFunction()">
            Click Here!
        </button>
      
        <script>
            function myFunction() {
                document.getElementById("myDiv")
                    .style.outlineStyle = "dotted";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before click on the button:

    • After click on the button:

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

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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :