Skip to content
Related Articles

Related Articles

HTML | DOM Style outline Property
  • Last Updated : 01 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

The Style outline property in HTML DOM is used to set or return all outline properties in one declaration. This property draws a line around an element. It sets or returns the one or more border property in short form.
The outline can be set the following properties:

  • outline-width
  • outline-style
  • outline-color

Syntax:

  • It returns the outline property.
    object.style.outline
  • It is used to set the outline property.
    object.style.outline = "width|style|color|initial|inherit"

Property Values:

  • width:It sets the outline width.
  • style:It sets the style of outline.
  • color:It sets the color of the outline.
  • Initial: It sets the DOM outline property to its default value.
  • Inherit: The element inherits its property from parent element.

Example 1: Add a thick solid blue outline around the div container.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML DOM Style outline Property
    </title>
</head>
  
<body>
    <div id = "container">
        <h1>GeeksforGeeks</h1>
          
        <h2>DOM Style outline Property</h2>
    </div>
  
    <script>
        function myGeeks() {
            document.getElementById("container").style.outline
                    = "thick solid blue";
        }
        myGeeks();
    </script>
</body>
  
</html>                    

Output:



Example 2: Add a length dashed green outline around the div container.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML DOM Style outline Property
    </title>
    <style>
    #container {
        border: 3px solid black;
        outline: 3px solid blue;
    }
    </style>
</head>
  
<body>
    <div id = "GFG">
        <h1>GeeksforGeeks</h1>
          
        <h2>DOM Style outline Property</h2>
    </div>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <!-- script to set outline style -->
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.outline
                    = "7px dashed green";
        }
    </script>
</body>
  
</html>                    

Output:

  • Before Click on the button:
  • After Click on the button:

Supported Browsers: The browser supported by DOM Style outline property are listed below:

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :