outline-color

The outline-color CSS property sets the color of an element's outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

/* Keyword values */
outline-color: invert;
outline-color: red;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Initial value	`invert`, for browsers supporting it, `currentColor` for the other
Applies to	all elements
Inherited	no
Media	visual, interactive
Computed value	For 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 `rgba(0,0,0,0)`.
Animation type	a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

The outline-color property is specified as any one of the values listed below.

Values

<color>: The color of the outline, specified as a <color>.
invert: To ensure the outline is visible, performs a color inversion of the background. Note that browsers are not required to support this value, in which case it is invalid.

Formal syntax

<color> | invertwhere 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Example

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid;      /* Set the outline width and style */
  outline-color: #0000FF;  /* Make the outline blue */
  margin: 5px;
}

Specifications

Specification	Status	Comment
CSS Basic User Interface Module Level 3 The definition of 'outline-color' in that specification.	Candidate Recommendation	No change.
CSS Transitions The definition of 'outline-color' in that specification.	Working Draft	Defines `outline-color` as animatable.
CSS Level 2 (Revision 1) The definition of 'outline-color' in that specification.	Recommendation	Initial definition.

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.5 (1.8) [1]	8.0	7.0	1.2 (125)
`invert` value	No support	?	No support [2]	8.0	No support [3]	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?

[1] In versions previous to Gecko 1.8: -moz-outline-color.

[2] Support had been dropped in version 3.0 (1.9).

[3] Supported in Opera 7 but support was dropped in Opera 15 with the adoption of Chromium/Blink engine.