HTML | DOM Style outlineStyle Property

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:
Values Description:

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> 
    <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> 
    <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
Safari
Opera

My Personal Notes

Suggest a Topic

Recommended Posts: