CSS border-width property

Definition and Usage

The shorthand property of border-width sets the width for all borders of an element, or sets the width for each border individually.

Only works when the border style is not none. If the border style is none, the actual border width will be reset to 0. Negative length values are not allowed.

Example 1

border-width:thin medium thick 10px;
  • The top border is a thin border
  • The right border is a medium border
  • The bottom border is a thick border
  • The left border is a 10px wide border

Example 2

border-width:thin medium thick;
  • The top border is 10px
  • The right and left borders are medium borders
  • The bottom border is a thick border

Example 3

border-width:thin medium;
  • The top and bottom borders are thin borders
  • The right and left borders are medium borders

Example 4

border-width:thin;
  • All 4 borders are thin borders

Example

Set the width of all four borders:

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

Try It Yourself

CSS Syntax

border-width: medium|thin|thick|length|initial|inherit;

Property Value

Value Description
thin Define a thin border.
medium Default. Defines a medium border.
thick Define a thick border.
length Allows you to customize the border width.
inherit Specify that the border width should be inherited from the parent element.

More Examples

All border width properties in one declaration
This example demonstrates setting all border width properties in the same declaration using shorthand properties.

Technical Details

Default Value: medium
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.borderWidth="thin thick"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

See also:

CSS Tutorial:CSS Borders

HTML DOM Reference Manual:borderWidth Property