CSS outline-color Property

CSS outline-color property sets the color of an element’s outline. An outline is a line that is drawn outside the borders of an element for decoration purpose.

The outline color can be specified in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. Refer to the example below:

Example:

.h1{
  outline-color: green;
}
.h2{
  outline-color: #03b1fc;
}
.h3{
  outline-color: rgb(252, 3, 231);
}

---

CSS Syntax

The outline-color property has the below syntax:

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

Property Values

The outline-color property accepts the following values:

invert	This is the default value. To ensure that the outline is visible, It performs a color inversion of the background.
color	Specifies the color of the outline in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
initial	Sets the outline-color property to its default value(invert).
inherit	Inherits the outline-color property from the parent element.

General Info

Default Value	invert
Inherited	No
JavaScript Usage	element.style.outlineColor = “blue”;