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:

  1. Using border bottom property
  2. 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>

I have a green dotted bottom border under me