This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

3.5.2 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:

Examples 1

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;
}

HEX Values

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

Example 2

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

RGB Values

Or by using RGB values:

Example 3

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

HSL Values

You can also use HSL values:

Example 4

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 in the W3Schools.com CSS Reference.

Invert Color

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

Example 5

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