Style outlineColor Property
Example
Change the color of the outline of a <div> element:
document.getElementById("myDiv").style.outlineColor = "#00ff00";Try it yourself »
Definition and Usage
The outlineColor property sets or returns the color of the outline around an element.
An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.
The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.
Browser Support
The outlineColor property is supported in all major browsers.
Note: The outlineColor property is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support it.
Syntax
Return the outlineColor property:
object.style.outlineColor
Set the outlineColor property:
object.style.outlineColor="color|invert|initial|inherit"
Property Values
| Value | Description |
|---|---|
| color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values |
| invert | Inverts the color of the outline to the opposite value. This is default |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | invert |
|---|---|
| Return Value: | A String, representing the color of an element's outline |
| CSS Version | CSS2 |
More Examples
Example
Return the border color of a <div> element:
alert(document.getElementById("myDiv").style.outlineColor);
Try it yourself »
Related Pages
CSS tutorial: CSS Outline
CSS reference: outline-color property
HTML DOM reference: outline property
Style Object
