CSS Outline Color:-

The CSS outline color property specifies the color of the outline of an element:

The CSS outline color property can  be as:

  • name - from the name property you can specify the name of the outline like "red".
  • HEX - from the hex property you can specify the name of the outline like "ff0000" 
  • RGB - from the rgb property you can specify the name of the outline like "rgb(255, 0, 0)".
  • HSL - from the hsl property you can specify the name of the outline like "hsl(0, 100%, 50%)".
  • invert - perform the color inversion (which ensures that the outline of the element is visible, regardless of the color background)



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: red;

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: blue;

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: gray;

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is to used to set the color of the outline </p>

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

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

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



HEX value:-

Using hex value you can set the outline color of the element.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: #ff0000; /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: #0000ff; /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: #bbbbbb; /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element value using hex value. </p>

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

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

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



RGB value:-

You can set your element outline using rgb value.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: rgb(255, 0, 0); /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: rgb(0, 0, 255); /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: rgb(187, 187, 187); /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element outline using the rgb value. </p>

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

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

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



HSL value:-

You can set your HTML element outline using hsl value.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: hsl(0, 100%, 50%); /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: hsl(240, 100%, 50%); /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: hsl(0, 0%, 73%); /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element outline using the hsl value. </p>

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

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

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience