CSS border-bottom-color Property

What You’ll Learn

The border-bottom-color property sets the color of the bottom border on an element. It is useful when you want the bottom edge styled differently from the other sides.

Definition and Usage

The border-bottom-color CSS property specifies the color of the bottom border of an element. This property is particularly useful when you want to style the bottom border differently from the top, left, and right borders.

By customizing the bottom border color, you can create distinct visual effects and emphasize certain sections of your design, such as active tabs, footer rules, and list dividers.

📝 Syntax

The syntax for border-bottom-color is simple and works like other border color properties:

selector {
  border-bottom-color: <color>;
}

Basic Example

.example {
  border: 2px solid black;
  border-bottom-color: red;
}

The color value can be a named color, hexadecimal value, RGB, HSL, transparent, or any other valid CSS color.

Syntax Rules

• This property affects only the bottom border color.
• It does not set width or style by itself.
• Use with border-bottom-width and border-bottom-style for full control.
• Alternatively, use border-bottom: 2px solid red; as shorthand.
• You can override the bottom color even when other sides use the border shorthand.

Default Value

The default value of border-bottom-color is currentColor. That means the bottom border uses the element’s text color value unless you override it.

💎 Property Values

border-bottom-color accepts any valid CSS color value.

Works With Other Longhands

Physical Bottom Edge

border-bottom-color always colors the visual bottom of an element, even when writing mode changes. For writing-mode-aware layouts, consider border-block-end-color instead.

border-bottom-color vs border-block-end-color

Examples Gallery

Try border-bottom-color with red overrides, hex values, currentColor, and multi-side border customization.

<style>
  .example {
    border: 2px solid black;
    border-bottom-color: red;
    padding: 0.75rem;
  }
</style>

<div class="example">
  This div has a bottom border color of red.
</div>

.footer-rule {
  border-bottom: 2px solid #2563eb;
  border-bottom-color: #2563eb;
  padding-bottom: 1rem;
}

.quote {
  color: #059669;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: currentColor;
}

.card {
  border: 2px solid #cbd5e1;
  border-bottom-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

💡 Best Practices