CSS border-right Property

Last Updated : 13 Jun, 2023

The border-right Property is a shorthand property used for all the three Properties that are given below-

border-right-width
border-right-style(if required)
border-right-color

Syntax:

border-right: border-width border-style border-color|initial|
inherit;

Property Values:

border-width border-style border-color:It is used to sets the width, style, and color of an Element’s Border.
initial: It sets the property to its default value.

Example: In this example, we are using the border-right: border-width border-style border-color property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-right Property
    </title>
    <style>
        h1 {
            border-right: 5px solid red;
        }
 
        h2 {
            border-right: 4px dotted blue;
        }
 
        div {
            border-right: double;
        }
    </style>
</head>
 
<body>
    <h1>A heading with a solid red right border</h1>
    <h2>A heading with a dotted blue right border</h2>
    <div>A div element with a double right border.</div>
</body>
</html>

Output:

Example: In this example, we are using the border-right:initial; property.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        h3 {
            border-right: initial;
            width: 20%;
        }
 
        div {
            border-right: initial;
            width: 40%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2> CSS Border-right Property</h2>
        <h3>geeksforgeeks</h3>
 
        <div>It is a computer science portal for geeks.</div>
    </center>
</body>
</html>