CSS Property: border-width
The width of the border of a box, around the content and padding areas and before the margin area.
With one value, the border-width
property can be used to specify a uniform border around a box. With two, three, or four values, sides can be specified independently.
Possible Values
Value | Note | Example |
---|---|---|
[length] | Should not be a negative value. | 10px |
thin | ||
medium | ||
thick | ||
inherit | ||
initial | ||
unset |
Multiple Values
One, two, three, or four space-separated values:
Value | Note | Example |
---|---|---|
[value] | [top, right, bottom, and left] | 10px |
[value] [value] | [top and bottom] [left and right] | 10px 20px |
[value] [value] [value] | [top] [right and left] [bottom] | 10px 20px 30px |
[value] [value] [value] [value] | [top] [right] [bottom] [left] | 10px 20px 30px 40px |
Example
aside { border-style: solid; }
/* Establishes a border style for border widths to apply (assuming the following are aside elements). */
#natterjack { border-width: 1px; }
/* Uniform border width of 12px on all four sides. */
#crestednewt { border-width: 2px 5px; }
/* Top and bottom border width are each 2px. Left and right border width are each 5px. */
#poolfrog { border-width: 0.5em 1px 3em; }
/* Top border width is 0.5em. Left and right border width are each 1px. Bottom border width is 3em. */
#smoothnewt { border-width: 10px 20px 30px 40px; }
/* Top border width is 10px. Right border width is 20px. Bottom border width is 30px. Left border width is 40px. */