CSS border-bottom Property
The border-bottom property is a shorthand property for defining the width, style, and color of the bottom border. The values can be reordered, but the recommended order is width, style, then color. Note that border-style is mandatory for the border to render; without it, the border will not appear regardless of the color or width.
If the width is omitted, it defaults to medium. If the color is omitted, it inherits the parent element's color. If the style is omitted, the border will not render.
| 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
css
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
html
<!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>Result
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
html
<!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>Result
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. |
Practice
What does the CSS 'border-bottom' property do?