CSS border-bottom-color Property

Definition and Usage

The border-bottom-color property sets the color of an element’s physical bottom border. It is one longhand of border-bottom, together with border-bottom-width and border-bottom-style.

The initial value is currentColor, so the border follows the element’s color unless you override it. For a writing-mode-aware end edge, use border-block-end-color. To set all four sides at once, use border-color.

CSS Syntax

The initial value is currentColor. Any valid CSS color works: named colors, hex, rgb(), hsl(), and more.

Property Values

How to Use border-bottom-color

Show a bottom border first, then change only its color.

1. Set a visible border-bottom-style such as solid.
2. Set border-bottom-width greater than 0 (for example 4px).
3. Set border-bottom-color to the color you want.
4. Or use border-bottom to set width, style, and color together.

Live Preview

Width and style stay fixed at 4px solid. Change only border-bottom-color.

CSS Examples

Each snippet keeps width and style fixed so you can focus on border-bottom-color. Use Try It Yourself for a live editor.

<style>
  p {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #1d4ed8;
  }
</style>

<p>Blue bottom border</p>

<style>
  p {
    color: #b45309;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: currentColor;
  }
</style>

<p>Matches text color</p>

<style>
  p {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
  }
</style>

<p>Invisible paint</p>

Key Takeaways