Define emphasis with CSS Outline Color! Explore examples for precise styling, mastering the art of enhancing and highlighting web elements effortlessly.
The outline-color
property is used to set the color of the outline.
The color can be set by:
The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the 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;
}
The outline color can also be specified using a hexadecimal value (HEX):
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}
Or by using RGB values:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
You can also use HSL values:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
#css