CSS border-width Property
CSS border-width property sets the widths of all four sides of an element's border. This property have four values. When you use one value, the border-width value will apply to all four sides of the element (i.e. top, right, bottom, left). It is a shorthand property which specifies the border-top-width, border-left-width, border-right-width, border-bottom-width.
When you use two values, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element. When three values are used, the first value will apply to the top of the element. The second value will apply to the right and left sides of the element. The third value will apply to the bottom of the element.
When four values are used, the first value will apply to the top of the element. The second value will apply to the right side of the element. The third value will apply to the bottom of the element. The fourth value will apply to the left side of the element.
Firstly you should define border-style property then the border-width property. An element must have borders before you can set the width.
| Initial Value | medium |
| Inherited | No |
| Animatable | Yes. The width of the border is animatable. |
| Version | CSS1 |
| JavaScript Syntax | object.style.borderWidth = "1px 5px"; |
Syntax
border-width: medium | thin | thick | length | initial | inherit;Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border is selected as 1px.</p>
</body>
</html>Let’s see the second example which contains three values.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium{
border-width: medium;
}
.thick {
border-width: 10px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border is selected as 1px.</p>
<p class="medium">This paragraph's border is selected as medium.</p>
<p class="thick">This paragraph's border is selected as 10px.</p>
</body>
</html>Values
| Value | Description |
|---|---|
| medium | Defines a medium border. This is default value. |
| thin | Defines a thin border. |
| thick | Defines a thick border. |
| length | Defines the thickness of border. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Related Resources
Border, border-style, border-top-width, border-left-width, border-right-width, border-bottom-width.
Browser support
|
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | 1.0+ | 3.5+ |