CSS outline-color Property

The outline-color property defines the color of an outline.

An outline is a line that is drawn around an element. But it is different from the border property. The width and height properties of an element do not include the outline width because the outline is not considered a part of the element’s dimensions.

INFO

The outline-color property does not work if you use it alone. It must be used with the outline or outline-style properties.

Hexadecimal, RGB, RGBA, HSL, HSLA or color names can be set as a value for the outline-color property. See the color values in the HTML colors section.

Initial Value	invert
Applies to	All elements.
Inherited	No.
Animatable	Yes. Color is animatable.
Version	CSS2
DOM Syntax	object.style.outlineColor = "#8ebf42";

Syntax

CSS outline-color syntax

css

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

Example of the outline-color property:

CSS outline-color code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Try it Yourself »

Result

CSS outline-color all values

Example of the outline-color property with hexadecimal, RGB, RGBA, HSL, HSLA colors:

CSS outline-color all values example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      .p2 {
        outline-style: solid;
        outline-color: hsl(65, 100%, 50%);
      }
      .p3 {
        outline-style: solid;
        outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4 {
        outline-style: solid;
        outline-color: rgb( 224, 0, 0);
      }
      .p5 {
        outline-style: solid;
        outline-color: rgba(204, 204, 204, 1);
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
invert	Inverts any color that is applied to the background. This value ensures the visibility of the outline regardless of background color. This is the default value of this property.	Play it »
color	Defines the outline color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Practice

What is true about the Outline Color Property in CSS?

The outline-color property in CSS is used to set the color of an outline.Outline color can be set in all types of CSS.It's only possible to set the outline color in CSS3.You can use a variety of color values like RGB, HEX, HSL and even color names.The default value of outline-color property in CSS is 'invert'.The outline color is always solid and cannot use color gradient.

CSS outline-color Property ​

Syntax ​

Example of the outline-color property: ​

Result ​

Example of the outline-color property with hexadecimal, RGB, RGBA, HSL, HSLA colors: ​

Values ​