The border-width property is used to set the width of the borders of an element. It is a shorthand property for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.
The value of the border-width property can be specified using one, two, three, or four components, where a component’s value can be explicitly set using a <length> value, or by using one of three border width keywords: thin, medium, and thick.
When one value is used, the value specifies the width of the top, right, bottom, and left borders. If two values are used, the first value specifies the width of the top and bottom borders and the second value specifies the width of the right and left borders. If three values are used, the first one specifies the width of the top border, the second one specifies the width of the right and left borders, and the third one specifies the width of the bottom border. If four values are used, the first, second, third, and fourth values specify the width of the top, right, bottom, and left borders respectively.
Official Syntax
-
Syntax:
border-width: <border-width>{1,4}where
<border-width> = <length> | thin | medium | thick
-
Initial: The concatenation of the long-hand properties:
border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: medium
- Applies To: all elements
-
Animatable: yes, the long-hand properties are animatable as
<length>s
Notes
Note that the initial width is medium, but the initial border style of an element is none and therefore the used width is 0.
Values
- <length>
-
The width of the border is set to the specified length. See the
<length>entry for a list of possible values. Negative values are not allowed. - thin
- A thin border. Implementation-specfic. See note below and the live demo for examples.
- medium
- A medium border. Implementation-specfic. See note below and the live demo for examples.
- thick
- A thick border. Implementation-specfic. See note below and the live demo for examples.
Notes
The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium font size: one choice might be 1px (for thin), 3px (for medium) & 5px (for thick) when the medium font size is 17px or less.
The border-width property can also inherit the value of the element’s parent’s border width using the keyword inherit.
Examples
The following are all valid border-width values set on an element. The element’s border style and border color are also set using the border-style and border-color respectively.
.element {
border-style: dotted;
border-color: red;
border-width: 10px; /* one-value syntax */
/* or */
border-width: thin medim; /* two-value syntax */
/* or */
border-width: 1em 2em 1em; /* three-value syntax */
/* or */
border-width: 5px 4px 3px 5px; /* four-value syntax */
}
Browser Support
The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.
