New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#outline-color

Defines the color of the element's outlines.

default outline-color: transparent;

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

outline-color: red;

You can use one of the 140+ color names.

outline-color: #05ffb0;

You can use hexadecimal color codes.

outline-color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

outline-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

outline-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

outline-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).