Borders part 3

• RSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

Borders

97

3/3

     

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. 

The HTML:<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>
The CSS:

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;}Try It Yourself

Result:
In CSS, it is possible to specify different borders for different sides, using the following properties: border-top-style, border-right-style, border-bottom-style, and border-left-style for the corresponding sides.