The border-width
property is a shorthand property for setting the widths on all four sides of an element's border: border-top-width
, border-right-width
, border-bottom-width
, and border-left-width
.
/* 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;
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
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
<br-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
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.
Formal syntax
<br-width>{1,4}
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 left</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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes | 1 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 2 | ? | Yes | 4 | 6 | 11 | 3 |
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
Document Tags and Contributors
Tags:
Contributors to this page:
DallasBelt,
ddbeck,
mfluehr,
DailyAlice,
erikadoyle,
HashemQolami,
Prinz_Rana,
mrenty,
zinfone,
Sebastianz,
fscholz,
whirr.click,
jsx,
teoli,
ArleyM,
apalma,
ima007,
J-Mackerel,
kscarfone,
SiddharthBhatt,
Sheppy,
ethertank,
FredB,
trevorh,
Yuichiro,
Rowno,
Jürgen Jeka,
Nathymig,
BijuGC,
Killerowski,
Mgjbot
Last updated by:
DallasBelt,