1. css
  2. /properties
  3. /border-bottom-color



border-bottom-color is a CSS property that sets the color of the bottom border of an element. It is used in conjunction with border-bottom-style and border-bottom-width to define the bottom border of an element.


Hex code

.element {
  border-bottom-color: #ff0000;


.element {
  border-bottom-color: red;

Color function

.element {
  border-bottom-color: rgb(255, 0, 0);

Global values

.element {
  border-bottom-color: inherit;
  border-bottom-color: initial;
  border-bottom-color: unset;


<color>Specifies the color of the border. Can be a keyword, a hex code, or a color function.
inheritThe element inherits the border-bottom-color value from its parent element.
initialSets the border-bottom-color to its default value.
unsetThe element's border-bottom-color is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use a clear and readable color for the border to improve the accessibility and usability of your site.
  • Avoid using too many different border colors on a single page as it can be visually overwhelming.
  • Make sure the border color matches the overall design and color scheme of your site.
  • Use the border-bottom-color property in conjunction with the border-bottom-style and border-bottom-width properties to fully define the bottom border of an element.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera