CSS border-bottom-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS property border-bottom-color controls the color of the bottom edge of an element’s border box. It targets only that single edge and does not by itself create a visible border - the computed color only affects rendering when the bottom border has a visible style and thickness. Because it isolates color from other border characteristics, it’s useful when you want to change only the hue of the bottom edge without touching width or style.

The property works alongside the other border edge properties: the color you set will only be visible if the corresponding border style is not none (and the width is not zero). When authoring or overriding grouped border rules you’ll commonly use the edge-specific shorthand border-bottom or the color-specific shorthand border-color; if you need to ensure the border actually renders, coordinate border-bottom-style (or its shorthand) accordingly. Because CSS cascades and resolves these values like other properties, specificity and source order determine which rule ultimately supplies the bottom border’s color.

In painting and compositing, the bottom border color participates in the normal box painting order: the border is painted along the element’s edges and interacts visually with backgrounds, adjacent elements, and effects like opacity. Transparent or semi-transparent colors let the underlying background show through, and using CSS custom properties (variables) or currentColor ties the border color into broader theming strategies without changing the border’s style or width. In table layouts where borders may be collapsed, the resulting visible border color is determined by the table border-collapsing algorithm rather than a single edge property alone, so check how border-collapse affects which color wins when adjacent cell borders meet.

Practical uses of border-bottom-color include creating underlines or emphasis on interactive elements (often combined with transitions), theming components by swapping colors without touching other border attributes, and making subtle separators that match or contrast with surrounding content. Because it is edge-specific, it’s particularly convenient when you want only one side of the box to carry a different visual treatment without redefining all four borders.

Definition

Initial value: currentColor
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.borderBottomColor

Interactive Demo

border-bottom-color: blue;

border-bottom-color: #ADB946;

border-bottom-color: rgb(25, 201, 33);

border-bottom-color: rgba(123, 45, 87, .5);

border-bottom-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-bottom-color: <color> | transparent

Values

<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

Example

HTML

<div class="example">

    <p class="underline">This paragraph uses border-bottom-color with a green bottom border.</p>

    <p class="underline-red">This paragraph uses border-bottom-color with a magenta bottom border.</p>

    <p class="underline-transparent">This paragraph uses border-bottom-color set to transparent (invisible).</p>

</div>

CSS

.example {
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.underline {
    border-bottom: 4px solid #4CAF50;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.underline-red {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #e91e63;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.underline-transparent {
    border-bottom: 4px solid transparent;
    padding-bottom: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-bottom-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.