Border Width

CSS / By
The width of elements borders is defined by the property border-width, which can have the values thin,medium, and thick, or a numeric value, indicated in pixels.
The border width of any object can be set with any width using the tag/argument border-width. border-width will not take effect with out border style. Border style can be set using “border-style“.
 
Border Width takes the following values:
  1. 5px : The border width can be set in pixels.
  2. 5pt : The border width can be set in points.
  3. 1% : The border width can be set in percentage.
 
The figure below illustrates the system:
 
Examples of border-width
 
Usage:
border-width: 5px;
border-width: 5pt;
border-width: 2%;
 
Example 1:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE>Border Example</TITLE>
  <style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: red;
}
  </style>
 </HEAD>

 <BODY>
<div class=”border1″>testing border width</div>

</BODY>
</HTML>
 
 
Example 2:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE>Border Example</TITLE>
  <style>
.border1
{
 border-width: 5pt;
 border-style: solid;
 border-color: #454545;
}
  </style>
 </HEAD>

 <BODY>
<font class=”border1″>testing border width</font> </BODY>

</HTML>
 
 
Example 3:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE>Border Example</TITLE>
  <style>
.border1
{
 border-width: 2%;
 border-style: solid;
 border-color: rgb(125,125,125);
}
  </style>
 </HEAD>
 <BODY>
<div class=”border1″>testing border width</div> </BODY>

</HTML>