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”; |
