CSS border-bottom-color Property

CSS border-bottom-color Property

The border-bottom-color property in CSS is used to set the color of the bottom border of an element. It works along with border-bottom-style and border-bottom-width to define the complete appearance of the bottom border.

1. Syntax

selector {
  border-bottom-color: value;
}

Accepted Values:

Value	Description
Color Name (red, blue, green)	Uses predefined color names.
Hex Code (#ff5733)	Uses a hexadecimal color code.
RGB (rgb(255, 87, 51))	Uses red, green, and blue values.
RGBA (rgba(255, 87, 51, 0.5))	Includes transparency (alpha).
HSL (hsl(10, 100%, 50%))	Uses hue, saturation, and lightness.
HSLA (hsla(10, 100%, 50%, 0.5))	Includes transparency.
transparent	Makes the border color invisible.
inherit	Inherits the color from the parent element.

2. Example – Setting Different Bottom Border Colors

.box1 {
  border-bottom: 3px solid red;
}

.box2 {
  border-bottom: 3px solid #3498db;
}

.box3 {
  border-bottom: 3px solid rgba(46, 204, 113, 0.7);
}

.box4 {
  border-bottom: 3px solid hsl(45, 100%, 50%);
}

<div class="box1">Red Bottom Border</div>
<div class="box2">Blue Bottom Border (Hex)</div>
<div class="box3">Green Bottom Border (RGBA)</div>
<div class="box4">Yellow Bottom Border (HSL)</div>

✅ Each div has a different bottom border color.

3. Example – Using border-bottom Shorthand

Instead of defining border-bottom-width, border-bottom-style, and border-bottom-color separately, you can use the border-bottom shorthand:

.box {
  border-bottom: 4px dashed purple;
}

✅ This is equivalent to:

.box {
  border-bottom-width: 4px;
  border-bottom-style: dashed;
  border-bottom-color: purple;
}

4. Example – Transparent Bottom Border

If you want to hide the bottom border while keeping the space occupied, use transparent:

.box {
  border-bottom: 3px solid transparent;
}

✅ The border won't be visible, but the layout remains unchanged.

5. Best Practices

✔ Always specify border-bottom-style; otherwise, the color won’t be visible.
✔ Use border-bottom shorthand for cleaner code.
✔ Utilize rgba() or hsla() for opacity control.