CSS border-bottom property
CSS border-bottom property is used to specify bottom side border width, style, and color of a HTML Element.
CSS border-bottom property is a shorthand to specify border-bottom-width, border-bottom-style, and border-bottom-color as a single property.
The syntax to specify border-bottom is
border-bottom: border-bottom-width border-bottom-style border-bottom-color;
where
Property | Mandatory/Optional | Examples |
---|---|---|
border-bottom-width | Optional | 1px, 2em |
border-bottom-style | Mandatory | solid, dotted, double |
border-bottom-color | Optional | #555, red, #55fffcdd |
Examples
border-bottom 5px solid red
In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, border-bottom-style of solid, and border-bottom-color of red.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-bottom: 5px solid red; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
border-bottom 5px solid
In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, and border-bottom-style of solid. We do not specify any value for border-bottom-color.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-bottom: 5px solid; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
border-bottom solid
In the following example, we set a border-bottom for <h1> element, with border-bottom-style of solid. We do not specify any width and color for the border-bottom.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-bottom: solid; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
div border-bottom
In the following example, we set a border-bottom for <div> element, with border-bottom of 2px solid #00F
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 200px; height: 100px; background: #CCC; border-bottom: 2px solid #00F; } </style> </head> <body> <div>Hello World</div> </body> </html>
Conclusion
In this CSS Tutorial, we learned about border-bottom property, and how to use this property for HTML Elements, with examples.