W3docs
en
Log in

CSS border-right Property

The CSS border-right shorthand sets the width, style, and color of an element's right border. Learn its syntax, values, and examples.

The CSS border-right property sets the width, line style, and color of the right border of an element. It is a shorthand property that lets you set three separate properties in a single declaration:

Instead of writing three rules, you can write one:

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

The three values can be specified in any order, and one or two of them may be omitted. When a value is left out, its default is used:

  • If the style is omitted, the border does not render at all — border-right-style defaults to none, which is why you must always include a style to see a border.
  • If the width is omitted, it defaults to medium.
  • If the color is omitted, the border takes the element's color value; when that is not set either, it falls back to the current text color (black by default).

When to use border-right

Use border-right when you want a line on only one side of a box — for example, a vertical divider between a sidebar and main content, a decorative accent on a card, or an underline-style separator rotated to a column. If you need the same border on all four sides, use the border shorthand instead; for the other single sides see border-left, border-top, and border-bottom.

Default Valuemedium none currentColor
Applies toAll elements. It also applies to ::first-letter.
InheritedNo
AnimatableYes. The width and color are animatable.
VersionCSS1
DOM Syntaxobject.style.borderRight = "1px solid black";

Syntax

Syntax of CSS border-right Property

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

Example of the border-right property:

Example of CSS 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>
Try it Yourself »

Result

![CSS border-right Property](/uploads/media/default/0001/03/4218a03bd607afbe39ebf9286536c0c363499170.png "CSS border-right example" =420x)

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

Example of the border-right property with multiple values:

Example of CSS border-right Property with solid, dotted and double 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>
Try it Yourself »

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:

Example of CSS border-right Property with solid property

<!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>
Try it Yourself »

Tips and gotchas

  • Always include a style. Setting only border-right: 2px #1c87c9; shows nothing because the style defaults to none. Add a keyword like solid.
  • Order is flexible. border-right: solid 5px red; and border-right: 5px solid red; are equivalent.
  • The shorthand resets omitted parts. Writing border-right: 5px solid; resets the color back to the current text color, even if you had set border-right-color earlier. Use the longhand properties when you want to change just one part without touching the others.
  • Borders add to layout size unless box-sizing: border-box is set, because the default content-box adds the border width to the element's overall width.

Values

The shorthand accepts the values of its three longhand properties, plus the CSS-wide keywords:

ValueDescription
border-right-widthSets the right border width of an element. The default value is "medium". Required value.
border-right-styleSets the line style of the right border of an element. The default value is "none". Required value.
border-right-colorSets the color of the right border of an element. The default value is the current color of the text.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice
What attributes can you specify while working with the border-right property in CSS?
What attributes can you specify while working with the border-right property in CSS?
Was this page helpful?