border-width
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:
|
---|---|
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
/* 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 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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.0 | (Yes) | 1.0 (1.9.2) | 6.0 | 11 | 3.0 |
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
© 2005–2017 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