CSS border-bottom-color

CSS border-bottom-color property

CSS border-bottom-color property is used to specify the bottom border color for HTML Element(s).

The syntax to specify a value for border-bottom-color property is

border-bottom-color: value;

The following table gives the possible values that could be given to border-bottom-color property.

Value	Description	Example
color	Any valid CSS color value.	border-bottom-color: red; border-bottom-color: #f00; border-bottom-color: #ff000088; border-bottom-color: rgb(25, 220, 85);
transparent	Sets bottom border color to transparent.	border-bottom-color: transparent;
initial	Sets bottom border color to default value.	border-bottom-color: initial;
inherit	Inherits bottom border color value from its parent element.	border-bottom-color: inherit;

Note: Please note that there must be a style specified for border or bottom border, to apply this color.

Examples

In the following examples, we apply a color for bottom border using different types of allowed values for border-bottom-color property.

HEX Value for border-bottom-color

In the following example, we set border-bottom-color for <h1> elements with hex value of #ab22ff.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: #ab22ff;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGB Value for border-bottom-color

In the following example, we set border-bottom-color for <h1> elements with RGB color value of rgb(224, 143, 242).

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: rgb(224, 143, 242);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGBA Value for border-bottom-color

In the following example, we set border-bottom-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5).

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: rgba(224, 143, 242, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSL Value for border-bottom-color

In the following example, we set border-bottom-color for <h1> elements with HSL color value of hsl(98, 49%, 74%).

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: hsl(98, 49%, 74%);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSLA Value for border-bottom-color

In the following example, we set border-bottom-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5).

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: hsla(98, 49%, 74%, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-bottom-color: transparent;

In the following example, we set border-bottom-color for <h1> elements with value of transparent.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-bottom: 5px solid;
            border-bottom-color: transparent;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-bottom property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS border-bottom-color