Aquileo | CSS border-right-color Property

The border-right-color property in CSS is used to specify the color of the right border of an element. It determines how the right border appears visually by applying a specific 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-right-style and border-right-width for complete border styling.

Syntax:

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

Property Values:

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

Example: Here, we are using border-right-color: color; property.

html

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

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

<body>
    <center>

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

        <p style="border-style:dotted;
                border-right-color:coral;
                width:70%;">
            It is a computer science portal for geeks.
        </p>
    </center>
</body>
</html>

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

html

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

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

<body>
    <center>

        <h1>GeeksForGeeks</h1>
        <h2>border-right-color:transparent;</h2>
        <h3>GeeksForGeeks</h3>
        <p style="border-style:dotted;
                border-right-color:transparent;
                width:70%;">
            It is a computer science portal for geeks.
        </p>
    </center>
</body>
</html>

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

HTML

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

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

<body>
    <center>

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

        <p style="border-style:dotted;
                border-right-color:
                initial;width:70%;">
            It is a computer science portal for geeks.
        </p>
    </center>
</body>
</html>

CSS border-right-color Property

Explore