How to add bottom border in HTML and CSS
The bottom border is usually used for underlining links or showing the active page on a navigation bar. There are two ways of setting the bottom border in CSS:
- Using border bottom property
- Using Border width, style and color properties.
1. Using border-bottom
You can use the border-bottom to add the bottom border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).
Example:
.border-link{
border-bottom: solid 2px #ff0000;
}
<a href="#" class="border-link">
I have a red border around me
</a>
I have a red bottom border under me
2. Using Border Width, Style and Color
You can also set the bottom border using the border-width, border-style and border-color properties.
Example:
.border-link{
border-style: dotted;
border-color: #00ff00;
border-width: 0 0 4px 0;
}
<a href="#" class="border-link">
I have a red bottom border under me
</a>