CSS Outlines

CSS Outlines

An outline is a line that is drawn around elements, outside the border edge, to make the element “stand out”.
The outline properties specifies the style, color, and width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.

However, it is different from the border property.

The outline is not a part of the element’s dimensions, therefore the element’s width and height properties do not contain the width of the outline.

<style type=”text/css”>
p {border:1px solid red;}
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>A dotted outline</p>
<p>A dashed outline</p>
<p>A solid outline</p>
<p>A double outline</p>
<p>A groove outline</p>
<p>A ridge outline</p>
<p>An inset outline</p>
<p>An outset outline</p>


A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline