CSS - border-width


Description:

border-width is a shorthand property used to set the width of the four border sides of an element.

Possible Values:

  • length: Any length unit. Length units for this property may not be negative.
  • thin: A border which is thinner than a border set to medium.
  • medium: A border which is thicker than a border set to thin, and thinner than a border set to thick.
  • thick: A border which is thicker than a border set to medium.

Applies to:

All the HTML elements.

DOM Syntax:

object.style.borderWidth="2px";

Example:

Following is the example to show all the border width:

<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>

<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">

This is a solid border whose width is thick.
</p>
     

This will produce following result:

This is a solid border whose width is 4px.

This is a solid border whose width is 4pt.

This is a solid border whose width is thin.

This is a solid border whose width is medium;

This is a solid border whose width is thick.

 

 





Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508