Set the Border Width

By Stephen Bucaro

Use the border-width property to set the border width.

Border Width Four Pixels

<p style="border-style: solid; border-width: 4px;">Border Width Four Pixels</p>

Use the border-top-width property to set the top border width separately.

Top Border Width Eight Pixels

<p style="border-style: solid; border-top-width: 8px;">Top Border Width Eight Pixels</p>

Use the border-right-width property to set the right border width separately.

Right Border Width Eight Pixels

<p style="border-style: solid; border-right-width: 8px;">Right Border Width Eight Pixels</p>

Use the border-bottom-width property to set the bottom border width separately.

Bottom Border Width Eight Pixels

<p style="border-style: solid; border-bottom-width: 8px;">Bottom Border Width Eight Pixels</p>

Use the border-left-width property to set the left border width separately.

Left Border Width Eight Pixels

<p style="border-style: solid; border-left-width: 8px;">Left Border Width Eight Pixels</p>

Set All Four Borders, Each Border a Different Width

The method shown below sets the border width for all four borders. You can set a different width for each border. The order of the values is top, right, bottom, left.

Sets Border Width For All Four Borders

<p style="border-style: solid; border-width: 5px 10px 15px 20px">Sets Border Width For All Four Borders</p>

 The "border-style" property must be set to a style other than "none" before setting the "border-width".