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