The border-width
shorthand CSS property sets the width of an element's border.
This property is a shorthand for the following CSS properties:
/* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global keywords */ border-width: inherit; border-width: initial; border-width: unset;
The border-width
property may be specified using one, two, three, or four values.
<line-width>
<length>
or a keyword. If it's a keyword, it must be one of the following values: thin | A thin border | |
medium | A medium border | |
thick | A thick border |
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.
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: |
<line-width>{1,4}where
<line-width> = <length> | thin | medium | thick
<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 left</p>
#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; }
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
border-width |
1 | 12 | 1 | 4 | 3.5 | 1 |
Mobile | ||||||
---|---|---|---|---|---|---|
border-width |
2 | 18 | 4 | 10.1 | 3 | 1.0 |
border
, border-style
, border-color
border-bottom-width
, border-left-width
, border-right-width
, border-top-width
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-width