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)
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}Live preview
RGB Values
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}Live preview
HSL Values
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}Live preview
You can also use HSL values
You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.