HTML | DOM Style outline Property
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
Please Login to comment...