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

  • Initial valuecurrentColor
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueThe computed color
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.borderBottomColor
Formal syntax: <color> 

border-bottom-color: green;
border-bottom-color: #3366FF;
border-bottom-color: rgb(51,102,255);
border-bottom-color: rgba(51,102,255,1);
border-bottom-color: hsl(225,100%,60%);
border-bottom-color: hsla(225,100%,60%,1);
border-bottom-color: transparent;
  • <color>The computed value of the 'color' property. This value can be a basic color keyword, such as red or green, a numerical value, an RGB or RGBA value, or an HSL or HSLA value.
  • transparentFully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
  • inherit
.class {
   border-bottom-color: #f0f0f0;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.