Outline Color
CSS Outline Color
The outline’s color can be changed using the outline-color attribute.
You can set the color by:
- name—give a name to the color, such as “red”
- HEX: Enter a hexadecimal value, such as “#ff0000”.
- RGB: Enter an RGB value here, e.g., “rgb(255,0,0)”.
- HSL: Enter a value in the format “hsl(0, 100%, 50%)”.
- invert – performs a color inversion (which ensures that the outline is visible, regardless of color background)
Several outlines of various colors are displayed in the sample that follows. Moreover, take note of the thin black border that surrounds the contour of these elements:
A solid red outline.
A dotted blue outline.
An outset grey outline.
Example
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
Hexadecimal values (HEX) can also be used to specify the outline color:
Example
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}
RGB Values
Alternatively, by employing RGB values:
Example
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
HSL Values
Moreover, HSL values can be used:
Example
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
