The border-width
shorthand CSS property sets the widths of all four sides of an element's border.
Each side can be set individually using border-top-width
, border-right-width
, border-bottom-width
, and border-left-width
; or using the writing mode-aware border-block-start-width
, border-block-end-width
, border-inline-start-width
, and border-inline-end-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;
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.
<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. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 2 | ? | Yes | 4 | 11 | 3 | ? |
border
, border-style
, border-color
border-bottom-width
, border-left-width
, border-right-width
, border-top-width
© 2005–2018 Mozilla Developer Network 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