CSS Reference Property

outline-color

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 invert keyword 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 invert value on platforms that do not support color inversion of the pixels on the screen. If the browser does not support the invert value then the initial value of the outline-color property is the value of the color property.

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.

View this demo on the Codrops Playground

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.

Written by . Last updated February 4, 2015 at 3:55 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.