CSS Outline Color

[Guest]

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)

The following example shows 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 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;
}
Try it Yourself »


HEX Values
The outline color can also be specified using a hexadecimal value (HEX):

Example

p.ex1 {  outline-style: solid;  outline-color: #ff0000;
/* red */}
Try it Yourself »








RGB Values
Or by using RGB values:

Example

p.ex1 {  outline-style: solid;  outline-color: rgb(255, 0, 0); /*
red */}
Try it Yourself »


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.













★
+1

Reference: https://www.w3schools.com/css/css_outline_color.asp