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:


  outline-color: green;
  outline-color: #03b1fc;
  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
JavaScript Usageelement.style.outlineColor = “blue”;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment