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 >
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
Share your thoughts in the comments
Please Login to comment...