CSS outline


Outlines are used to make a particular HTML element selected.We can use this to make HTML element appear different form other HTML elements.Outline is not the part of HTML or CSS element.
    CSS outlines are of following types:
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outset
  • None
  • Hidden

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
border:1px solid green;
outline-color:blue;
}
p.dotted{outline-style:dotted;}
p.dashed{outline-style:dashed;}
p.solid{outline-style:solid;}
p.double{outline-style:double;}
p.groove{outline-style:groove;}
p.ridge{outline-style:ridge;}
p.inset{outline-style:inset;}
p.outset{outline-style:outset;}
p.hidden{outline-style:hidden;}
p.none{outline-style:none;}
</style>
<title>
CSS BORDERS
</title>
</head>
<body>
<p class="dotted">This is dotted outline.</p>
<p class="dashed">This is dashed outline.</p>
<p class="solid">This is solid outline.</p>
<p class="double">This is double outline.</p>
<p class="groove">This is groove outline.</p>
<p class="ridge">This is ridge outline.</p>
<p class="inset">This is inset outline.</p>
<p class="outset">This is outset outline.</p>
<p class="hidden">This is hidden outline.</p>
<p class="none">This is none outline.</p>
</body>
</html>

Output:

This is dotted outline.

This is dashed outline.

This is solid outline.

This is double outline.

This is groove outline.

This is ridge outline.

This is inset outline.

This is outset outline.

This is hidden outline.

This is none outline.