HTML Dog
Skip to navigation

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

ValueNoteExample
[length]Should not be a negative value.10px
thin
medium
thick
inherit
initial
unset

Multiple Values

One, two, three, or four space-separated values:

ValueNoteExample
[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. */

Browser support