The outline-color property is used to set the color of an element’s outline.
An outline is a line that is drawn outside the borders of an element to make it stand out on the page. It is usually used for accessibility reasons, and can be used for decoration purposes. Refer to the outline property entry for more information about outlines, how they differ from borders, and more.
The outline-color property is a longhand property that can be specified as part of the shorthand outline property. It is usually more convenient to set the outline of an element using the shorthand property.
Official Syntax
-
Syntax:
outline-color: <color> | invert | inherit
- Initial: invert
- Applies To: all elements
- Animatable: yes, as a color
Values
- <color>
-
See the
<color>entry for a list of possible color values. - invert
-
This is the default color value if the browser supports this keyword.
The
invertkeyword inverts whatever color is applied to the background. This ensures enough contrast and hence visibility of the outline regardless of background color.More specifically, this keyword value causes the browser to invert the pixels on the screen where the outline will go, to ensure maximum visibility and focus on the element.
Browsers may ignore the
invertvalue on platforms that do not support color inversion of the pixels on the screen. If the browser does not support theinvertvalue then the initial value of theoutline-colorproperty is the value of thecolorproperty. - inherit
- The element inherits its outline color from its parent.
Examples
The following adds a 2px-width purple outline to input fields when they are focused/tabbed. The width and style of the outline are set using the outline-width and outline-style properties.
input[type="text"]:focus {
outline-width: 2px;
outline-style: solid;
outline-color: purple;
}
Live Demo
The following demo sets the outline color on boxes (<div>s) with different outlines.
Browser Support
The outline-color property is supported in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is supported starting from version 8.
