CSS outline-color Property
Set a color for the outline:
More "Try it Yourself" examples below.
Definition and Usage
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
outline-color property specifies the color of an
Note: Always declare the outline-style property before the
outline-color property. An element must have an outline before you change the
color of it.
|Animatable:||yes, see individual properties. Read about animatable Try it|
Tips and Notes
Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
The numbers in the table specify the first browser version that fully supports the property.
|color||Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values.||Demo ❯|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
Set a color for the outline with a HEX value:
Set a color for the outline with an RGB value:
Set a color for the outline with an RGBA value:
Set a color for the outline with a HSL value:
Set a color for the outline with a HSLA value:
CSS tutorial: CSS Outline
CSS reference: outline property
HTML DOM reference: outlineColor property