Loading lesson path
Overview
Formula
The outline - color property is used to set the color of the outline.The color can be set by:
Formula
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)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.
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;Formula
outline - color:green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
}The outline color can also be specified using a hexadecimal value (HEX):
Example p.ex1 {
outline-style: solid;
outline-color: #ff0000;/* red */
}Example p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*red */
}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 our CSS Colors chapters.