Skip to content
Related Articles

Related Articles

HTML | DOM Style outlineStyle Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!