Border Style

CSS / By
There are different types of borders to choose from. Below are shown 8 different types of borders asInternet Explorer 5.5 and Firefox 2 interprets them. All examples are shown with the color “gold” and the thickness “thick” but can naturally be shown in other colors and thicknesses.
 
Note:
Some border style make not show properly on Firefox 2, because they are non-standard or supports IE only.
 
The style of the border can be set using the tag border-style. Border Style takes the following values:
  1. dotted- This will create a border with dotted lines.
  2. dashed- This will create a border with dashed lines.
  3. solid- This will create a border with solid lines.
  4. double- This will create a border containing double lines.
  5. groove- This will create a border that will look like groove.
  6. ridge- This will create a border that will look like ridge.
  7. inset- This will create a border with the line looking inset.
  8. outset- This will create a border with the line looking outset.
 
Different types of borders
 
Usage:
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
 
Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 2px; border-style: dotted; border-color: red;
}
.border2
{
border-width: 2px; border-style: dashed; border-color: red;
}
.border3
{
border-width: 2px; border-style: solid; border-color: red;
}
.border4
{
border-width: 4px; border-style: double; border-color: red;
}
.border5
{
border-width: 4px; border-style: groove; border-color: red;
}
.border6
{
border-width: 4px; border-style: ridge; border-color: red;
}
.border7
{
border-width: 4px; border-style: inset; border-color: red;
}
.border8
{
border-width: 4px; border-style: outset; border-color: red;
}
</style>
<HEAD>

<body>
<div class=”border1″> testing border style[dotted]</div> <br />
<div class=”border2″> testing border style[dashed]</div> <br />
<div class=”border3″> testing border style[solid]</div> <br />

<div class=”border4″> testing border style[double]</div> <br />
<div class=”border5″> testing border style[groove]</div> <br />
<div class=”border6″> testing border style[ridge]</div> <br />
<div class=”border7″> testing border style[inset]</div> <br />
<div class=”border8″> testing border style[outset]</div>
</body>

</HTML>