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:
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:
| medium | This is the default value. It sets a medium thickness border. |
| thin | Sets a thin border. |
| thick | Sets a thick border. |
| length | Specifies the thickness of the border. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| initial | Sets the border-width property to its default value(medium). |
| inherit | Inherits the border-width property from the parent element. |
General Info
| Default Value | medium |
| Inherited | No |
| JavaScript Usage | element.style.borderWidth = “5px”; |
Related Pages
CSS Tutorial: CSS Borders
