CSS border-width Property

CSS border-width property specifies the width of all four sides of borders of an element in a single declaration. It is a shorthand of the below four properties:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

The border-width can be specified using keywords like ‘thin’, ‘medium’, ‘thick’, or using any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.

The border-width property can accept one, two, three or four values at a time. Let’s discuss each in detail:

If only one value is specified:

• border-width: val;

The same value(val) applies to all four sides of the border. That is, top, left bottom and right. Refer to the example below:

Example:

h1{
  border-style: solid;
  border-width: 3px;
}

If two values are specified:

• border-width: val1 val2;

The first value(val1) applies to the top and bottom borders and the second value(val2) applies to the left and right borders. Refer to the example below:

Example:

h1{
  border-style: solid;
  border-width: 3px 5px;
}

If three values are specified:

• border-width: val1 val2 val3;

The first value(val1) applies to the top border, the second value(val2) applies to the left and right borders and the third value applies to the bottom border. Refer to the example below:

Example:

p{
  border-style: solid;
  border-width: 3px 5px 7px;
}

If all four values are specified:

• border-width: val1 val2 val3 val4;

The first value(val1) applies to the top border, the second value(val2) applies to the right border, the third value(val3) applies to the bottom border and the fourth value(val4) applies to the left border. Refer to the example below:

Example:

p{
  border-style: solid;
  border-width: 3px 5px 7px 9px;
}

CSS Syntax

The border-width property has the following syntax:

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

Property Values

The border-width property accepts the following values:

General Info

Related Pages

CSS Tutorial: CSS Borders