CSS border-bottom Property
CSS border-bottom sets the width, style, and color of an element's bottom border in one declaration. Covers syntax, values, and examples.
The border-bottom property is a CSS shorthand that defines the width, style, and color of an element's bottom border in a single declaration. Instead of writing three separate longhand properties, you set them all at once:
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;This page covers the syntax, the accepted values, worked examples, and the most common gotcha (a missing style) so your border actually shows up.
How the values behave
You can list the three values in any order, but the recommended order is width, style, color. Any value you leave out falls back to its default:
- Width omitted → defaults to
medium(roughly 3px in most browsers). - Color omitted → defaults to
currentColor, i.e. the element's text color. - Style omitted → defaults to
none, which means the border does not render at all.
That last point is the number-one reason a border-bottom "doesn't work": without a border-style, the browser draws nothing no matter what width or color you set.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }When to use border-bottom
Reach for border-bottom when you want a line on only one side of an element rather than a full box. Common cases:
- Underlined headings or section dividers — a heavier, colored rule under an
<h2>. - Tab/navigation indicators — highlighting the active link with a bottom border.
- Input fields — the "Material Design" look uses only a bottom border instead of a full box.
If you need the same border on all four sides, use the border shorthand instead. For the other individual sides, see border-top, border-left, and border-right.
| Initial Value | medium none currentColor |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. The color and the width of the border-bottom are animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.borderBottom = "15px dotted blue"; |
Syntax
Syntax of CSS border-bottom Property
border-bottom: border-width | border-style | border-color | initial | inherit;Example of the border-bottom property:
Example of CSS border-bottom Property with groove value
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Example of using the border-bottom property with <h2>, <p> and <div> elements:
Example of CSS border-bottom Property with dashed, double and ridge values
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Values
| Value | Description |
|---|---|
| border-bottom-style | Defines the style of the bottom border. Default value is "none". |
| border-bottom-width | Defines the width of the bottom border. Default value is "medium". |
| border-bottom-color | Defines the color of the bottom border. Default value is the color of the text. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Related properties
border— the all-sides shorthand.border-top,border-left,border-right— the other per-side shorthands.border-bottom-width,border-bottom-style,border-bottom-color— the three longhandsborder-bottomexpands to.border-style,border-width,border-color— control all four sides at once per aspect.