CSS border-bottom-color Property

The border-bottom-color property sets the bottom border color.

Color values can be hex, rgb, hsl, rgba, hsla, or a color name.

A border-bottom-style value is required for any border to show.

Example

#

An element with a colored bottom border.

A #302ea3 colored bottom border.
<style>
  .border-bottom-indigo {
    padding: 5px;
    border-bottom-style: solid;
    border-bottom-color: #302ea3;
  }
</style>

<div class="border-bottom-indigo">
  A #302ea3 colored bottom border.
</div>

Syntax

border-bottom-color: color | transparent | 
                     initial | inherit;

Values

#

Value Description
color Bottom border color. Accepts colorname, hex, rgb, rgba, hsl, hsla values.
transparent Sets bottom border color to transparent
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-bottom-color values.

border-bottom-color: #302ea3.
<style>
  .border-bottom-example {
    padding: 10px;
    border-bottom-style: solid;
    border-bottom-color: #302ea3;
  }
</style>

<div class="border-bottom-example">
  border-bottom-color: #302ea3.
</div>

Browser support

This table shows when border-bottom-color support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides