SS 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:
The outline-color property is used to set the color of the outline.
A solid red outline.
A dotted blue outline.
An outset grey outline.
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):
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
} RGB Values #
Or by using RGB values
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
} HSL Values #
You can also use HSL values:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
} 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:
Using outline-color:invert #
A solid invert outline.
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
} 
