X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS outline-color Property

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

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

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names 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

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

Example

<!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>

Another example where hexadecimal, RGB, RGBA, HSL, HSLA colors are set:

Example

<!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>

Values

Value Description
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.
color Defines the outline color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

1.0+ 12.0+ 1.5+ 1.2+ 7.0+

Practice Your Knowledge

Which statement is incorrect about the outline-color property ?



Do you find this helpful?

Related articles