CSS Outline

CSS Outline


CSS Outline  
An outline is a line around an element. It is displayed around the margin of the element. 
However, it is different from the border property, 
In other words -
Outline is a line that goes around the element, outside of the border. 
In contrast to borders, outlines do not take any space in the box model. 
So adding an outline to an element does not affect the position of the element or other elements.
In addition, outlines can be non-rectangular in some browsers. 
This can happen if outline is applied on a span element that has text with different font-size properties inside it. 
Unlike borders, outlines cannot have rounded corners.
The essential parts of outline are  given down below - 
  • outline-color, 
  • outline-style and 
  • Outline-width.
Now we will see them one by one in detail down below - 
Outline  Style -
The outline-style property is used to set the style of the outline of an element.
Syntax - 
We can use outline style property using the following syntax - 
outline-style : value;
Following are the values of outline-style property - 
  • dotted  -  dotted outline
  • dashed - dashed outline
  • solid - solid outline
  • double - double outline
  • groove - 3D grooved outline, depends on the outline-color value
  • ridge - 3D ridged outline, depends on the outline-color value
  • inset - 3D inset outline, depends on the outline-color value
  • outset - 3D outset outline, depends on the outline-color value
  • none - no outline
  • Hidden -  hidden outline
Example  - 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      p {
border: 1px solid black;
outline-color:skyblue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}

     
      </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>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>

</body>
</html>
Output -