In this section, we will learn what the outline-color property is and how to use it in CSS.

Click here to run the outline-color property.

CSS outline-color Property Definition and Usage

Other than content, padding and borders, an element has a line around itself that is known as the outline.

Now, CSS has provided a property named `outline-color` by which we can change the color of this outline.

Note: you need to set the outline-style property first because by default the outline of a border does not have a style and hence it won’t appear around the border of an element.

CSS outline-color Property Syntax

outline-color: invert|color|initial|inherit;

CSS outline-color Property Value

The value we set for this property could be either “color-name”, “HSL”, or “RGB” value.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: outline-color in CSS

See the Pen outline-color in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.