/* <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

The color of the bottom border.

Formal definition

Formal syntax

<'border-top-color'>

Examples

A simple div with a border

<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> 

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

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors