border-bottom-color

Summary

The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.

Syntax

border-bottom-color: yellow;
border-bottom-color: #F5F6F7;

Values

<color>

Is a <color> CSS value describing the color of the bottom border.

inherit

Is a keyword denoting the color of the bottom border of the parent's element (which may be different from the border-bottom-color default value)

Formal syntax

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Examples

A simple div with a border

HTML Content

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

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

.redtext {
  color: red;
}

Result

Specifications

Browser Compatibility

[1] Gecko-based browsers like Firefox also support the non-standard -moz-border-bottom-colors CSS property that sets the bottom border to multiple colors.

See also

• The border-related CSS shorthand properties border, border-bottom, and border-color.
• The color-related CSS properties applying to 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.