The border-style Property

The default value of border-style is none, which defines no border. There are various styles supported for the border-style property: dotted, dashed, double, etc. The example below illustrates the differences between them.

 <p class="none">This paragraph has no border.</p>
<p class="dotted">This is a dotted border.</p>
<p class="dashed">This is a dashed border.</p>
<p class="double">This is a double border.</p>
<p class="groove">This is a grooved border.</p>
<p class="ridge">This is a ridged border.</p>
<p class="inset">This is an inset border.</p>
<p class="outset">This is an outset border.</p>
<p class="hidden">This is a hidden border.</p>                    

 p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}