border-width: 12px 5px 20px 5px;

border-width

value: <border-width>{1,4}
initial-value: see individual properties
inherited: no
percentages: N/A
applicable to: all elements

The border-width attribute is a shorthand property for:

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

The value of <border-width>{1,4} means that you must state the border width in pixels and you can state from 1 to 4 values for the width. The values will apply to the width of the border in this order: top, right, bottom, left. If only two values are given, the first will apply to the top and bottom border and the second value will apply to the right and left border.

The border-width attribute is not an inherited property. Any any element can have a border around it.

Take Note: To specify the border-width of an element in question, you must also have stated a border-color and border-style for that element.

Example:

#dashedbox {border-color: #770011; border-style: dashed; border-width: 5px; }
#goofybox {border-color: #3322ff; border-style: solid; border-width: border-width: 2px 8px 14px 20px; }
#groovebox{border-color: 0033cc; border-style: groove; border-width: 16px 4px;}

These styles are shown below:

#dashedbox

#goofybox

#groovebox

Take Note: The border lays just outside the padding for the element and adds to the overall outside dimensions by twice the width stated with border-width.