Aquileo | CSS border-top-color Property

The border-top-color property in CSS is used to define the color of the top border of an element. It controls the visual appearance of the border by specifying its color.

It accepts color values like red, #ff0000, rgb(), hsl(), or transparent.
The color is visible only when a border style is applied (e.g., solid, dashed).
It is commonly used with border-top-style and border-top-width for complete border styling.

Syntax:

border-top-color: color | transparent | initial | inherit;

Default Value : The current color of the element

Property Values:

color: It sets the color of the Element’s top-border.
Transparent: It specifies the transparent value of top-border.
initial: It sets the Property to its default value.

Example: Here, we are using the border-top-color: color property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: red;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:color;</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color-->
        <p style="border-style:dotted; 
                border-top-color:coral; 
                width:70%;">
            It is a computer science portal for geeks.</p>

    </center>
</body>
</html>

Example: Here, we are using the border-top-color: transparent; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: transparent;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>

        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:transparent</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color to transparent-->
        <p style="border-style:dotted; 
                border-top-color:transparent; 
                width:70%;">
            It is a computer science portal for geeks.</p>
    </center>
</body>
</html>

Example: Here, we are using the border-top-color: initial; property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-top-color Property
    </title>
    <style>
        h1 {
            color: green;
        }

        h3 {
            border: 2px solid green;
            border-top-color: initial;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>

        <h1>GeeksForGeeks</h1>
        <h2>border-top-color:initial;</h2>
        <h3>GeeksForGeeks</h3>

        <!-- Sets the color to its default value-->
        <p style="border-style:dotted; 
                border-top-color:initial; 
                width:70%;">
            It is a computer science portal for geeks.</p>
    </center>
</body>
</html>

CSS border-top-color Property

Explore