The DOM Style outlineColor Property is used to sets or returns the color of the outline around an Element.
Syntax:
- It is used to Return the outlineColor property
object.style.outlineColor
- it is used to Set the outlineColor property
object.style.outlineColor = "color|invert|initial|inherit"
Property Values:
- color: It sets the outline color to any valid CSS color.
- invert: It set the outline color to a color which is inverse of the background, which ensures the outline will always be visible. Note: It is not supported by all browsers.
- Inherit: It sets the outline color according to outline-color property inherited from its parent element.
Return Value: It returns a string value which represent the color of the outline in an element’s.
Example-1:
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML | DOM Style outlineColor Property
</ title >
< style >
#myDiv {
border: 1px solid red;
outline: green dotted thick;
}
</ style >
</ head >
< body >
< h1 > Geeks for Geeks</ h1 >
< h2 >HTML | DOM Style outlineColor Property</ h2 >
< div id="myDiv">Welcome to Geeks for Geeks.</ div >
< br >
< button type="button" onclick="myFunction()">
Click Here!
</ button >
< script >
function myFunction() {
// Set outline color.
document.getElementById("myDiv")
.style.outlineColor = "red";
}
</ script >
</ body >
</ html >
|
Output: Before Clicking On Button:
After Clicking On Button:
Example-2 :
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML | DOM Style outlineColor Property
</ title >
< style >
#myDiv {
border: 1px solid red;
outline: dotted thick;
}
</ style >
</ head >
< body >
< h1 > Geeks for Geeks</ h1 >
< h2 >HTML | DOM Style outlineColor Property</ h2 >
< div id="myDiv" style="outline-color:green;">
Welcome to Geeks for Geeks.</ div >
< br >
< button type="button" onclick="myFunction()">
Click Here!
</ button >
< script >
function myFunction() {
alert(document.getElementById(
"myDiv").style.outlineColor);
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking On Button:

- After Clicking On Button:

Supported Browsers: The browser supported by DOM Style outlineColor Property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 1.5 and above
- Opera 7 and above
- Safari 1.2 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
10 Jun, 2022
Like Article
Save Article