CSS border-width

View Output

The CSS border-width property is shorthand for setting the width of all borders on an element.

You can supply from one to four values. Each value specifies the width for each side of the element.

For example, if four values are provided, they will apply to the top, right, bottom and left borders - in that order. Supplying one value applies the width to all four sides. Supplying three values applies the styles to top, left and right, and bottom (in that order).

Syntax

Where

These values are explained below.

Possible Values

thin
Specifies a thin border. It is up to the user agent to determine the actual width.
medium
Specifies a medium width border. It is up to the user agent to determine the actual width.
thick
Specifies a thick border. It is up to the user agent to determine the actual width.
length
Specifies the width of the border using a length value. For example, 10px, 1em, 8pt etc

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
medium (based on the intial value of the individual properties).
Applies To
All elements.
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

Official Specifications