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> 