CSS border-width Property

Example

Set a width for the borders:

div {border-width: thin;}

Definition and Usage

The border-width property sets the width of an element's four borders. This property can have from one to four values.

Examples:

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

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

Default value:	medium
Inherited:	no
Animatable:	yes.
Version:	CSS1
JavaScript syntax:	object.style.borderWidth="1px 5px"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which border-width is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

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

Property
border-width	1.0	4.0	1.0	1.0	3.5

CSS Syntax

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

Property Values

Value	Description	Demo
medium	Specifies a medium border. This is default
thin	Specifies a thin border
thick	Specifies a thick border
length	Allows you to define the thickness of the border.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Set the width of the borders to medium:

div {border-width: medium;}

Example

Set the width of the borders to thick:

div {border-width: thick;}

Example

Set the width of the borders to 1px:

div {border-width: 1px;}

Example

Set the width of the borders to 15px:

div {border-width: 15px;}

Example

Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

div {border-width: 10px 1px;}