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;
}
Try it Yourself »
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
RGB Values
Or by using RGB values:
HSL Values
You can also use HSL values:
Example
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Try it Yourself »
You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.
Exercise?What is this?
Test your skills by answering a few questions about the topics of this page
Which property is used to define the color of an element's outline?
