The outline color property is used to set the color of the outline.

The color can be set by :

  • Name - Specifies the color name like in English
  • HEX - Specifies the hexadecimal value for color like #000000 for BLACK
  • RGB - Specifies the red, green & Blue color for the value like rgb(255,255,254)
  • HSL - Specifies the HSL values for the color like hsl(0, 50%, 85%)
  • Invert - Performs an inversion with the color specifies like the visibility & Opacity 

Example Program : 

<html>

<head>

<style>

p.ex1 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: red;

}

p.ex2 {

  border: 2px solid black;

  outline-style: dotted;

  outline-color: red;

}

p.ex3 {

  border: 2px solid black;

  outline-style: outset;

  outline-color: red;

}

p.ex4 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: #ff0000;

}

p.ex5 {

  border: 2px solid black;

  outline-style: dotted;

  outline-color: #ff0000;

}

p.ex6 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: #ff0000;

}

p.ex7 {

  border: 1px solid yellow;

  outline-style: solid;

  outline-color: invert;

}

p.ex8 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: hsl(40%, 100%, 50%);

}

p.ex9 {

  border: 2px solid black;

  outline-style: solid;

  outline-color: rgb(255, 255, 254);

}

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>

<p class="ex3">An outset grey outline.</p>

<p class="ex4">A solid red outline.</p>

<p class="ex5">A dotted blue outline.</p>

<p class="ex6">A solid grey outline.</p>

<p class="ex7">A solid invert outline.</p>

<p class="ex8">A solid red outline.</p>

<p class="ex9">A solid red outline.</p>

</body>

</html>

Output : 

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

Example Program :

<html>

<head>

<style>

p {

  margin: 30px;

  background:yellow;

  border: 1px solid black;

  outline: 1px solid purple;

  outline-offset: 15px;

}

</style>

</head>

<body>

<h2>The outline-offset Property</h2>

<p>LetsUpgrade is the best platform to learn new things.</p>

</body>

</html>

Output :