CSS Outline Color

CSS Outline Color


CSS Outline Color 
We can also change CSS outline color using the outline-color property in css.
Syntax  - 
Outline-color : value; 
We can give value to the property in the following ways - 
  1. Name - Directly writing color name, like "blue"
  2. HEX - Writing a hex value, like "#00ff00"
  3. RGB - Writing a RGB value, like "rgb(0,0,255)"
  4. HSL - Writing a HSL value, like "hsl(0, 100%, 50%)"
  5. invert - This ensures that the outline is visible, regardless of color background, and performs a color inversion.
Now we will see Example  - 
Example - Using all the values one after another in paragraph one, paragraph 2, etc respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
 
.p1{
    border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
.p2{
    border: 1px solid black;
  outline-style: solid;
  outline-color: pink;
  outline-width: medium;}
.p3{
    border: 1px solid black;
  outline-style: solid;
  outline-color: rgb(0, 153, 255);
  outline-width: thick;}
  .p4{
    border: 1px solid black;
  outline-style: solid;
  outline-color: #00ff00;
  outline-width: 4px;}
.p5{
    border: 1px solid black;
  outline-style: solid;
  outline-color: rgb(9, 191, 236);
  outline-width: 8px;}
.p5{
    border: 1px solid black;
  outline-style: solid;
  outline-color: hsl(271, 100%, 50%);
  outline-width: 8px;}
      </style>

    </Style>
<link rel="stylesheet" href="sample.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
</body>
</html>

Output -