CSS border-top-color

CSS border-top-color property

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

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

border-top-color: value;

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

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

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

Examples

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

HEX Value for border-top-color

In the following example, we set border-top-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-top: 5px solid;
            border-top-color: #ab22ff;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGB Value for border-top-color

In the following example, we set border-top-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-top: 5px solid;
            border-top-color: rgb(224, 143, 242);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

RGBA Value for border-top-color

In the following example, we set border-top-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-top: 5px solid;
            border-top-color: rgba(224, 143, 242, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSL Value for border-top-color

In the following example, we set border-top-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-top: 5px solid;
            border-top-color: hsl(98, 49%, 74%);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HSLA Value for border-top-color

In the following example, we set border-top-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-top: 5px solid;
            border-top-color: hsla(98, 49%, 74%, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border-top-color: transparent;

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

index.html

</>

Copy

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

Conclusion

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

TutorialKart

CSS border-top-color