CSS OUTLINE STYLE


A line that is drawn around elements, outside the borders is called an outline. Unlike border, the outline is drawn outside the element's border. It may overlap other content.

Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Following are the outline properties:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Outline Style


This specifies the style of the outline, and can have one of the following values:

  • dotted - Defines a dotted outline
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline
  • double - Defines a double outline
  • groove - Defines a 3D grooved outline
  • ridge - Defines a 3D ridged outline
  • inset - Defines a 3D inset outline
  • outset - Defines a 3D outset outline
  • none - Defines no outline
  • hidden - Defines a hidden outline

For example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
  outline-color:red;
  outline-style:dotted;
}
</style>
</head>
<body>
<p>A dotted outline</p>
</body>
</html>
Live Demo!


Output:

A dotted outline



Below are all the outline styles: 


<!DOCTYPE html>
<html>
<head>
<style>
  p {outline-color:green;}
  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;}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. Depends on outline-color.</p>
<p class="ridge">A ridge outline. Depends on the outline-color.</p>
<p class="inset">An inset outline. Depends on the outline-color.</p>
<p class="outset">An outset outline. Depends on the outline-color.</p>

</body>
</html>
Live Demo!


Output:

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline. Depends on outline-color.

A ridge outline. Depends on the outline-color.

An inset outline. Depends on the outline-color.

An outset outline. Depends on the outline-color.