<!DOCTYPLE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Border-Types</title>
<style>
p.none {border-style: none; height: 25px; color: white; background-color: red;}
p.mix {border-style: dotted dashed
solid double; color: blue; height: 25px;}
p.hidden {border-style: hidden;}
p.inset {border-style: inset; color: red; height: 25px;}
p.groove {border-style: groove; color:
white; height: 25px; background-color: blue;}
p.dashed {border-style: dashed; color:
red; height: 25px;}
p.dotted {border-style: dotted;height: 25px;}
p.solid {border-style: solid; color: white; height: 25px; background-color: green;}
p.double {border-style: double;
border-color: red; height: 25px; }
p.ridge {border-style: ridge;height: 25px;}
p.outset {border-style: outset; color:
gray;height: 25px;}
</style>
</head>
<body>
<p class="none">1. No border.</p>
<p class="mix">2.A mixed border: dotted, dashed, solid, double; </p>
<p class="hidden">3. A hidden border.</p>
<p class="inset">4. An inset border.</p>
<p class="groove">5. A groove border.</p>
<p class="dashed">6. A dashed border.</p>
<p class="dotted">7. A dotted border.</p>
<p class="solid">8. A solid border.</p>
<p class="double">9. A double border showing border color, width, height, background color.</p>
<p class="ridge">10. A ridge border.</p>
<p class="outset">11. An outset border.</p>
</body>
</html>
Results
1. No border.
2.A mixed border: dotted, dashed, solid, double;
3. A hidden border.
4. An inset border.
5. A groove border.
6. A dashed border.
7. A dotted border.
8. A solid border.
9. A double border showing border color, width, height, background color.
10. A ridge border.
11. An outset border.