CSS Outline Color

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)

CSS Outline Color Examples

Here are 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 green outline.

A solid invert outline.

Example

Demonstration of different outline colors:

  p {
  border: 1px solid black;
  padding: 5px;
}

  p.ex1 {
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  outline-style: dotted;
  outline-color: blue;

  }

p.ex3 {
  outline-style: outset;
  outline-color:
  green;
}

p.ex4 {
  outline-style: solid;
 
  outline-color: invert;
}

HEX Values

The outline color can also be specified using a hexadecimal value (HEX):

Example

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

RGB Values

Or by using RGB values:

Example

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

HSL Values

You can also use HSL values:

Example

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

You can learn more about HEX, RGB and HSL values in the CSS Colors chapters.