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:

invertThis is the default value. To ensure that the outline is visible, It performs a color inversion of the background.
colorSpecifies the color of the outline in any valid CSS color format such as โ€˜color nameโ€™, โ€˜HEXโ€™, โ€˜RGBโ€™, โ€˜HSLโ€™, etc.
initialSets the outline-color property to its default value(invert).
inheritInherits the outline-color property from the parent element.

General Info

Default Valueinvert
InheritedNo
JavaScript Usageelement.style.outlineColor = โ€œblueโ€;