CSS Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:

name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

A solid red outline.

A dotted blue outline.

An outset grey 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 »