Our volunteers haven't translated this article into हिन्दी (भारत) yet. Join us and help get the job done!
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.
| Initial value | currentColor |
|---|---|
| Applies to | all elements. It also applies to ::first-letter. |
| Inherited | no |
| Media | visual |
| Computed value | If 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). |
| Animatable | yes, as a color |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
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-colordefault 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 | WindowTextwhere
<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
| 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 |
Browser Compatibility
| 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.
See also
- The border-related CSS shorthand properties
border,border-bottom, andborder-color. - The color-related CSS properties applying to the other borders:
border-right-color,border-top-color, andborder-left-color. - The other border-related CSS properties applying to the same border:
border-bottom-styleandborder-bottom-width.