Open In App

HTML | DOM Style outline Property

Improve
Improve
Like Article
Like
Save
Share
Report

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"

Return Values: It returns a string value that represents the outline width, style and/or color of an element

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. 

HTML




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

HTML




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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads