The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.

/* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent;  /* Global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: revert; border-bottom-color: unset; 

border-bottom-color

The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.

Syntax

/* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent;  /* Global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: revert; border-bottom-color: unset; 

The border-bottom-color property is specified as a single value.

Values

<color>

The color of the bottom border.

Formal definition

Initial value	currentcolor
Applies to	all elements. It also applies to ::first-letter.
Inherited	no
Computed value	computed color
Animation type	a color

Formal syntax

<'border-top-color'>

Examples

A simple div with a border

HTML

<div class="mybox">   <p>This is a box with a border around it.      Note which side of the box is      <span class="redtext">red</span>.</p> </div> 

CSS

.mybox {     border: solid 0.3em gold;     border-bottom-color: red;     width: auto; }  .redtext {     color: red; } 

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # border-color

See also

The border-related CSS shorthand properties: border, border-bottom, and border-color. The color-related CSS properties for the other borders: border-right-color, border-top-color, and border-left-color. The other border-related CSS properties applying to the same border: border-bottom-style and border-bottom-width.

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language