Css: border-width

border-width shorthand property allows all four sides of an element’s borders to be set using either one, two, three, or four specified values.

Note that a border will only be visible as long as a border-style has been set.

Syntax:

border-width: [ thin | medium | thick | <length> ]{1,4} | inherit


thin, medium, or thick: length of these keywords is user-agent dependent, but thin <= medium <= thick.

length: a specific length (include unit of measure)

inherit: element should have the same border-width setting as the parent.

Property accepts one, two, three or four <border-width> values:

These whitespace separated values set the width of the top, right, bottom, and left border of a box.

If one value is set, this width applies to all 4 sides.

If two values are set, the first applies to top and bottom, the second applies to the right and left side.

Three values apply to the top, right and bottom side. The left side takes the second value.

Four values apply to the top, right, bottom, left side in that order.

For more information on shorthand properties, see here.

Eg: sets 2px border on top and bottom and 8px to left and right

#example p {
     border-style: solid;
     border-width: 2px 8px;  
}