Style outlineColorProperty
Style Object
Definition and Usage
The outlineColor property sets or returns the color of the outline around an element.
Syntax
Set the outlineColor property:
Object.style.outlineColor="color|invert|inherit"
Return the outlineColor property:
Object.style.outlineColor
| Value | Description |
|---|---|
| color | Specifies the color of the outline. InCSS color valueslook for a complete list of possible color values. |
| invert | Default. Reverses the outline color to the opposite value. |
| inherit | The color of the outline is inherited from the parent element. |
Browser Support
All major browsers support the outlineColor property.
Note:IE7 and earlier versions do not support the outlineColor property. IE8 supports the outlineColor property only if a !DOCTYPE is specified. IE9 supports the outlineColor property.
Tips and Notes
An outline is a line drawn around an element. It is displayed around the element's margin. However, it is different from the border property.
The outline is not part of the element's dimensions, so the width and height properties of the element do not include the width of the outline.
Example
Example
Change the color of the outline:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineColor="#0000FF";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change the outline color</button>
<p><b>Note:</b> To support the outline property in IE8 and earlier versions, a !DOCTYPE must be declared.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineColor="#0000FF";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change the outline color</button>
<p><b>Note:</b> To support the outline property in IE8 and earlier versions, a !DOCTYPE must be declared.</p>
</body>
</html>
Try it Yourself »
Style Object Other Extensions