border-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
css
/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;
/* <length> values */
border-width: 4px;
border-width: 1.2rem;
/* top and bottom | left and right */
border-width: 2px 1.5em;
/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;
/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;
/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;
The border-width
property may be specified using one, two, three, or four values.
- When one value is specified, it applies the same width to all four sides.
- When two values are specified, the first width applies to the top and bottom, the second to the left and right.
- When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).
Values
<line-width>
-
Defines the width of the border, either as an explicit nonnegative
<length>
or a keyword. If it's a keyword, it must be one of the following values:thin
medium
thick
Note:
Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick
, and the values are constant within a single document.
Formal definition
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
Formal syntax
border-width =
<line-width>{1,4}
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Examples
A mix of values and lengths
HTML
html
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
two different values: 2px wide top and bottom border, 10px wide right and left
border
</p>
<p id="three-values">
three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
four different values: "thin" top, "medium" right, "thick" bottom, and 1em
left
</p>
CSS
css
#one-value {
border: ridge #ccc;
border-width: 6px;
}
#two-values {
border: solid red;
border-width: 2px 10px;
}
#three-values {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#four-values {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
Result
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-width |
Browser compatibility
BCD tables only load in the browser
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