CSS OUTLINE COLOR


We can have a coloured outline for the border of an element. The outline-color property is used to set the color of the outline.

Following values can be used to set the color:

  • 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)

For example:


<!DOCTYPE html>
<html>
<head>
<style>
p.o1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* hex value of red */
}
p.o2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(120, 100%, 50%);   /* hsl value of green */

}
p.o3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>
<p> The outline-color Property.</p>
<p class="o1">A solid red outline.</p>
<p class="o2">A dotted green outline.</p>
<p class="o3">An outset grey outline.</p>
</body>
</html>
Live Demo!


Output:

The outline-color Property.

A solid red outline.

A dotted green outline.

An outset grey outline.


The above example shows different outlines with different colors and inside the outline is a solid black border too.


Invert Color

This property performs color inversion by setting value of outline-color as invert, ensuring that the outline is visible, regardless of color background.


Example: 


p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}
Live Demo!