CSS border-right Property

The CSS border-right property sets the width, line style and color of the right border of elements. It is a shorthand property for specifying the values of the following properties:


These three values of the shorthand property can be specified in any order, and one or two of them can be missed.

The value will be taken from the color property in the case of the color is not specified. If the color property is not defined, it will take the black color by default.

If the width is not specified, it will take the medium size of the element.

Default Value medium none currentColor
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. The width and color are animatable.
Version CSS1
DOM Syntax object.style.borderRight = "1px solid black";

Syntax

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

Example of the border-right property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-right: 5px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-right example</h2>
    <div> This is a simple example for the border-right property.</div>
  </body>
</html>

Result

CSS border-right Property

The border-right property can be applied to different elements and can have various style values.

Example of the border-right property with multiple values:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-right: 7px solid #8ebf42;
      }
      p {
        border-right: 5px dotted #1c87c9;
      }
      div {
        border-right: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green right border</h1>
    <p>A heading with a dotted blue right border.</p>
    <div>A div element with a thick double right border.</div>
  </body>
</html>

You can also create a box with the <div> element and set a background-color for your box, then add a right border to have a fancy box.

Example of using the border-right property to create a fancy box:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        height: 80px;
        text-align: center;
        padding: 20px;
        background: #ccc;
        border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>This box has a solid border on the right side.</div>
  </body>
</html>

Values

Value Description
border-right-width Sets the right border width of an element. The default value is "medium". Required value.
border-right-style Sets the line style of the right border of an element. The default value is "none". Required value.
border-right-color Sets the color of the right border of an element. The default value is the current color of the text.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 9.2+

Practice Your Knowledge

What attributes can you specify while working with the border-right property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?