CSS border-bottom Property
The border-bottom property is a shorthand property for defining the width, style, and color of the bottom border. You can change places of the values. But the right order is when you set the width, the style, and then the color of the border-bottom. If you don’t define the style of your border, the color will not work, because an element must have a border before you change the color of it.
If you don’t mention the width, it will automatically choose a medium size. If the color is not specified, it will understand the parent color, and if the style is not specified, it will not work.
| Initial Value | medium none currentColor |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. The color and width of the border-bottom are animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.borderBottom = "15px dotted blue"; |
Syntax¶
border-bottom: border-width | border-style | border-color | initial | inherit;Example of the border-bottom property: ¶
<!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: ¶
<!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. The default value is "none". |
| border-bottom-width | Defines the width of the bottom border. The default value is "medium". |
| border-bottom-color | Defines the color of the bottom border. The default value is the color of the text. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji