CSS border-bottom Property
The border-bottom property in CSS is used to set all bottom border properties in one line. It is used to set the width, style, and color of the bottom border. The default value is initial.
Syntax
border-bottom: border-width border-style border-color|initial|inherit;
Property Values
border-bottom is a shorthand to set the below property values:
Values |
Descriptions |
---|---|
border-width |
It is used to set the width of the border. |
border-style |
It is used to set the style of border. Its default value is ‘none’. |
border-color |
It is used to set the color of border. |
initial |
This property is used to set border-bottom to its default value. |
inherit |
This property is inherited from its parent. |
Example:
html
<!DOCTYPE html> < html > < head > < title >border-bottom property</ title > <!-- border-bottom CSS property --> < style > h1 { border-bottom: 5px solid green; } h2 { border-bottom: 4px dotted black; } </ style > </ head > < body style = "text-align:center" > < h1 >w3wiki</ h1 > < h2 >border-bottom property</ h2 > </ body > </ html > |
Output:
Supported Browsers
The browser supported by border-bottom property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0