Definition and Usage
The border-width CSS property sets the width of the border of a box. Using the shorthand property border is often more convenient.
-
Initial the concatenation of the initial values of its longhand properties:
- border-top-width: medium
- border-right-width: medium
- border-bottom-width: medium
- border-left-width: medium
- Applies to all elements
- Inherited no
- Media visual
-
Computed Value as each of the properties of the shorthand:
-
Animatable as each of the properties of the shorthand:
- border-bottom-width: yes, as a length
- border-left-width: yes, as a length
- border-right-width: yes, as a length
- border-top-width: yes, as a length
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <br-width>{1,4}
border-width: width /* One-value syntax */
border-width: horizontal vertical /* Two-value syntax */
border-width: top vertical bottom /* Three-value syntax */
border-width: top right bottom left /* Four-value syntax */
border-width: inherit
Values
- <br-width>
-
Is either a non-negative explicit <length> value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
Style |
Preview |
Description |
thin |
|
A thin border |
medium |
|
A medium border |
thick |
|
A thick border |
The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the 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.
Examples
border: ridge #ccc;
border-width: 6px; /* same as "border: ridge #ccc 6px"; 6px wide border on all 4 sides */
border: solid red;
border-width: 2px 10px; /* 2px wide top and bottom border, 10px right and left border */
border: dotted orange;
border-width: 0.3em 0; /* 0.3em wide top and bottom border, no border right and left */
border: solid lightgreen;
border-width: medium 0 1px thick; /* three different width, no right border */
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
4.0 |
3.5 |
1.0 (85) |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
NA |
1.0 (1.9.2) |
NA |
NA |
NA |