CSS border-right property

CSS border-right property is used to specify right side border width, style, and color of a HTML Element.

CSS border-right property is a shorthand to specify border-right-width, border-right-style, and border-right-color as a single property.

The syntax to specify border-right is

</>
Copy
border-right: border-right-width border-right-style border-right-color;

where

PropertyMandatory/
Optional		Examples
border-right-widthOptional1px, 2em
border-right-styleMandatorysolid, dotted, double
border-right-colorOptional#555, red, #55fffcdd

Examples

border-right: 5px solid red;

In the following example, we set a border-right for <h1> element, with border-right-width of 5px, border-right-style of solid, and border-right-color of red.

index.html

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

border-right: 5px solid;

In the following example, we set a border-right for <h1> element, with border-right-width of 5px, and border-right-style of solid. We do not specify any value for border-right-color.

index.html

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

border-right: solid;

In the following example, we set a border-right for <h1> element, with border-right-style of solid. We do not specify any width and color for the border-right.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border-right: solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

div border-right

In the following example, we set a border-right for <div> element, with border-right value of 5px solid #00F.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 200px;
            height: 100px;
            background: #CCC;
            border-right: 5px solid #00F;
        }
    </style>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

Conclusion

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