Open In App
Related Articles

HTML | DOM Style outlineStyle Property

Improve Article
Improve
Save Article
Save
Like Article
Like

 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: 

html




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

html




<!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 1
  • Edge 12
  • Internet Explorer 8
  • Firefox 1.5
  • Opera 7
  • Safari 1.2

Last Updated : 08 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials