CSS Outline Color

CSS Outline Color

outline-color This property is used to set the outline color.

Colors can be set in the following ways:

  • name - Specify color names, such as "red"
  • HEX - Specify hexadecimal values, such as "#ff0000"
  • RGB - Specify RGB values, such as "rgb(255,0,0)"
  • HSL - Specify HSL values, such as "hsl(0, 100%, 50%)"
  • invert - Execute color inversion (ensure the outline is visible regardless of the background color)

The following example shows some different colors and outline styles. Note that these elements also have a black thin border inside the outline:

Red solid line outline.

Blue dotted outline.

Gray protruding outline.

Example

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Try It Yourself

HEX values

You can also use hexadecimal values (HEX) to specify the outline color:

Example

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* Red */
}

Try It Yourself

RGB values

Or by using RGB values:

Example

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* Red */
}

Try It Yourself

HSL Values

You can also use HSL values:

Example

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Red */
}

Try It Yourself

You can find more information in our CSS Colors Learn more about HEX, RGB, and HSL values in the chapter.

color inversion

The following example uses outline-color: invertIt performs color inversion. This ensures that the outline is visible regardless of the color background:

Outline in reverse color.

Example

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Try It Yourself