The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.
Initialinvert, for browsers supporting it, currentColor for the other
Applies toall elements
Inheritedno
Mediavisual, interactive
Computed ValueFor the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <color> | invert
outline-color: invert
outline-color: red
outline-color: inherit
Values
<color>
See <color> for the various color keywords and notations.
invert
To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browser are not required to support it. If not, they just consider the statement as invalid
Examples
1
.example {
2
/* make the outline blue */
3
outline-color: #0000FF;
4
}
produces the following outline color for a 2px outline:
outline-color is blue.
Compatibility
Desktop browsers
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
1.0
1.5 (1.8) In versions previous to 1.5: -moz-outline-color
