CSS - border-bottom-color

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.

Example

 

HTML Content

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 Content

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

.redtext {
  color: red;
}

Result

Syntax  

CSS
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

CSS
<a href="css/color_value" title=""><color></a><p>where <br><code><color> = <a href="css/border-bottom-color#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-bottom-color#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-bottom-color#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-bottom-color#hsla()"><hsla()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <hex-color> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-bottom-color#named-color"><named-color></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> currentcolor <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-bottom-color#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/border-bottom-color#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> )<br><rgba()> = rgba( <a href="css/border-bottom-color#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> , <a href="css/border-bottom-color#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/border-bottom-color#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/border-bottom-color#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/border-bottom-color#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ActiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> AppWorkspace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Background <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> CaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> GrayText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Highlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> HighlightText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoBackground <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Menu <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> MenuText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Scrollbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDDarkShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDLightShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Window <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowFrame <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><alpha-value> = <a href="css/number" title=""><number></a><br><hue> = <a href="css/number" title=""><number></a></code></p>

Description  

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.

Initial valuecurrentColor
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueIf the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatableyes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Also  

Specifications  

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-bottom-color' in that specification.		 Candidate Recommendation No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed.
CSS Level 2 (Revision 1)
The definition of 'border-bottom-color' in that specification.		 Recommendation Initial definition

 

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier)[1] 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0)[1] 6.5 11 1.0

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/border-bottom-color

CSS CSS Borders CSS Property Reference