# Property Description

The border-width shorthand property sets all of the border widths in one declaration. This property can accept from one to four values.

    border-width:
      <top> <right> <bottom> <left>

If all four values are provided, the border widths are as specified.

    border-width:
      <top> <right/left> <bottom>

If three values are provided, right and left border widths are set as middle value.

    border-width:
      <top/bottom> <right/left>

If two values are provided, top and bottom border widths are set as the first value, right and left border widths are set as second value.

    border-width:
      <top/right/bottom/left>

If one value is provided, all four border width values are set the same.

Note: Always declare the border-style property before the border-width property. An element must have borders before the border width can be changed.

# Property Values

Value | Description
--- | ---
thin | Sets a thin border
medium | (default) Sets a medium border
thick | Sets a thick border
length | Sets the thickness of the border
inherit1 | Specifies that the value of the property should be inherited from the parent element

# Examples

This example sets the width of all four borders.

    p {
      border-style:solid;
      border-width:10px;
    }

This example shows the results of setting the various border-width values:

    border-width:thin

    border-width:medium

    border-width:thick

# Browser Support

Firefox | IE | Chrome | Opera | Safari

1 - 'inherit' not supported by IE

# Miscellaneous Information

Inherited: | No
Defined In: | CSS1