CSS - border-top-width


Description:

sets the width of the top border 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.borderTopWidth="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>
<p style="border-bottom-width:4px;
             border-top-width:10px;
             border-left-width: 2px;
             border-right-width:15px;
             border-style:solid;">
This is a a border with four different width.
</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.

This is a a border with four different width.

 

 





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