CSS outline-color

The outline-color property is used to set the color of the outline of an element. It is a longhand property of the outline property.

Outlines are drawn around elements outside the borders. These do not take up any space and thus never influence the position or size of the element boxes. These are usually used for better accessibility or for making design attractive.

CSS

outline-color: value;

Values

invert : This value performs a color inversion of the background to ensure that the outline is visible. So basically this value gives the inverted background color to the outline so that the outline is visible on that background. This value is not supported by all the browsers and is the default value for the browsers supporting this value.

<color> : Specifies the color of the outline.

initial : Sets the initial value.

inherit : Sets the value of the parent element.

To be noted

• You must define the outline-style property while giving the outline-color value. This is because there is no outline present by default. So in order to give an outline color, you must first define an outline using the outline-style property.
• For browsers like IE 8 and its higher versions which support the value invert, the default value for the outline-color property is invert. For browsers which do not support this value, the default value is black.
• If no outline-color value is specified or if the specified value is not supported by the current browser, then the browser uses the default value for outline color.

Examples

See the Pen outline-color property examples by Aakhya Singh (@aakhya) on CodePen.

Both the above div elements are given a green colored border and an outline. As stated earlier, the outline-style property must be defined while defining the outline color because there needs to be an outline to change the color of. Defining outline-width property is not necessary to define outline color.

The second div is given outline-color: grey which made the outline color grey. The first div is given outline-color: invert, which gave the inverted background color to the outline in the browsers which support this value. Since the background color is yellow, so the outline color became a bluish shade. In all the other browsers, it appears black. The result would look like the following in browsers supporting the invert value.

You can give the color value in various specifications. A few are shown in the following demo.

See the Pen outline-color property values by Aakhya Singh (@aakhya) on CodePen.

Since the last div is given no outline color, it took the default value which is the keyword invert in browsers supporting it and black in other browers. In both the cases, the outline color is black. Some of these specifications may not be supported by some browsers. In that case also, the property takes the default value.

Browser Support

All major modern browsers support this property. However, the outline-color property is supported by IE 8 only if a !DOCTYPE is specified. The value invert is supported by only IE 8 and its higher versions and Edge.