CSS border-bottom-width Property
The border-bottom-width property sets the width of the bottom border.
To see the effect of border-bottom-width, you must also set a border-style or the border-bottom-style property. Without a border style, the width has no visible effect.
The specification does not define the exact thickness for each keyword; the precise result is implementation-specific. However, they always follow the pattern thin ≤ medium ≤ thick, and the values remain constant within a single document.
| Initial Value | medium |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. The width can be animated. |
| Version | CSS1 |
| DOM Syntax | object.style.borderBottomWidth = "5px"; |
Syntax
Syntax of CSS border-bottom-width Property
border-bottom-width: medium | thin | thick | length | initial | inherit;Example of the border-bottom-width property:
Example of CSS border-bottom-width Property with thick value
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Result
Example of the border-bottom-width property with the "medium" value:
Example of CSS border-bottom-width Property with medium value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Example of the border-bottom-width property that shows the difference between the "thin" and "thick" values:
Example of CSS border-bottom-width Property with thin value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| medium | Sets a medium bottom border. It is the default value. | Play it » |
| thin | Sets a thin bottom border. | Play it » |
| thick | Sets a thick bottom border. | Play it » |
| length | Sets the bottom border width to a specific length value. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property value from its parent element. |
Practice
Which of the following values are accepted by the border-bottom-width property in CSS?