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
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: 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 | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The 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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-bottom-color
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 Notes' Firefox also supports the non-standard |
IE
Full support 4 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Firefox also supports the non-standard |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
See also
- The border-related CSS shorthand properties:
border
,border-bottom
, andborder-color
. - The color-related CSS properties for 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-style
andborder-bottom-width
.
border-bottom-color by Mozilla Contributors is licensed under CC-BY-SA 2.5.