The Style outlineStyle property in HTML DOM is used to set or return the style of the outline around an element.
Syntax:
- It is used to return the outlineStyle property.
object.style.outlineStyle
- It is used to set the outlineStyle property.
object.style.outlineStyle = value
Property Values:
- none: This is the default value that sets no outline.
- hidden: Using this value,the outline is turned off.
- dotted: This value sets a dotted outline.
- dashed: This value sets a dashed outline.
- solid; This value sets a solid outline.
- double; This value sets a double outline.
- groove; This value sets a 3D grooved outline.
- ridge; This value sets a 3D ridged outline.
- inset; This value sets a 3D inset outline.
- outset; This value sets a 3D outset outline.
- initial; This value sets the outline property to its browser’s default value.
- inherit: This value sets the outline property to the value from its parent element.
Return Value: This method returns a String value representing the style of an element’s outline.
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML | DOM Style outlineStyle Property
</ title >
< style >
#myDiv {
border: 1px solid red;
outline: green dotted thick;
}
</ style >
</ head >
< body >
< h1 > Geeks for Geeks</ h1 >
< h2 >HTML | DOM Style outlineStyle Property</ h2 >
< div id="myDiv">Welcome to Geeks for Geeks.</ div >
< br >
< button type="button" onclick="myFunction()">
Click Here!
</ button >
< script >
function myFunction() {
document.getElementById("myDiv")
.style.outlineStyle = "solid";
}
</ script >
</ body >
</ html >
|
Output:
- Before click on the button:

- After click on the button:

Example 2:
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML | DOM Style outlineStyle Property
</ title >
< style >
#myDiv {
border: 1px solid red;
}
</ style >
</ head >
< body >
< h1 > HTML | DOM Style outlineStyle Property</ h1 >
< div id="myDiv">Welcome to Geeks for Geeks.</ div >
< br >
< button type="button" onclick="myFunction()">
Click Here!
</ button >
< script >
function myFunction() {
document.getElementById("myDiv")
.style.outlineStyle = "dotted";
}
</ script >
</ body >
</ html >
|
Output:
- Before click on the button:

- After click on the button:

Supported Browsers: The browser supported by DOM Style outlineStyle Property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 8
- Firefox 1.5
- Opera 7
- Safari 1.2