border-width

The border-width property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width and border-left-width of a box at the same place.

Initial value	as each of the properties of the shorthand: border-top-width: medium border-right-width: medium border-bottom-width: medium border-left-width: medium
Applies to	all elements. It also applies to ::first-letter.
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: border-bottom-width: the absolute length or 0 if border-bottom-style is none or hidden border-left-width: the absolute length or 0 if border-left-style is none or hidden border-right-width: the absolute length or 0 if border-right-style is none or hidden border-top-width: the absolute length or 0 if border-top-style is none or hidden
Animation type	as each of the properties of the shorthand: border-bottom-width: a length border-left-width: a length border-right-width: a length border-top-width: a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* border-width: width */ /* the width applies to all sides */
border-width: 5px;
/*border-width: top&bottom right&left */
border-width: 2px 1.5em;

/* border-width: top right&left bottom */
border-width: 1px 2em 1.5cm;

/* border-width: top right bottom left */
border-width: 1px 2em 0 4rem;

border-width: inherit;

Values

<br-width>

Is either a non-negative explicit <length> value or a keyword denoting the thickness of the border area of a box. The keyword must be one of the following values:

thin		A thin border
medium		A medium border
thick		A thick border

The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.

inherit

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Formal syntax

<br-width>{1,4}
where 
<br-width> = <length> | thin | medium | thick

Examples

A mix of values and lengths

HTML

<p id="sval">
    one value: 6px wide border on all 4 sides</p>
<p id="bival">
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>

CSS

#sval {
    border: ridge #ccc;
    border-width: 6px;
}
#bival {
    border: solid red;
    border-width: 2px 10px;
}
#treval {
    border: dotted orange;
    border-width: 0.3em 0 9px;
}
#fourval {
    border: solid lightgreen;
    border-width: thin medium thick 1em;
}
p {
    width: auto;
    margin: 0.25em;
    padding: 0.25em;
}

Result

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'border-width' in that specification.	Candidate Recommendation	No direct change, the <length> CSS data type extension has an effect on this property.
CSS Level 2 (Revision 1) The definition of 'border-width' in that specification.	Recommendation	Added the constraint that values' meaning must be constant inside a document.
CSS Level 1 The definition of 'border-width' in that specification.	Recommendation	Initial definition

Browser compatibility

See also

• The border-related shorthand properties: border, border-style, border-color
• The border-width-related properties: border-bottom-width, border-left-width, border-right-width, border-top-width