CSS border-right Property

Definition and Usage

The border-right property is a shorthand that sets border-right-width, border-right-style, and border-right-color on the physical right edge.

A line appears only when the style is not none. Width defaults to medium and color to currentColor when omitted. It always stays on the right, unlike border-inline-end, which follows writing direction.

CSS Syntax

Write one to three values, in any order. The usual pattern is width, style, then color: border-right: 4px solid #2563eb;.

Property Values

How to Use border-right

Pick a style first so the right edge is visible, then set width and color as needed.

1. Choose the element that should show a line on the physical right side.
2. Set a style such as solid, dashed, or dotted. Without a style, nothing draws.
3. Add a width and color when you want them. Omit them to use medium and currentColor.
4. Use border-inline-end instead when the edge should flip in RTL layouts.

Live Preview

Change border-right and watch only the right edge update.

CSS Examples

Each snippet focuses on border-right only. Use Try It Yourself for a live editor.

<style>
  div {
    border-right: 5px solid red;
    padding: 10px;
  }
</style>

<div>Right border</div>

<style>
  div {
    border-right: 4px dashed #2563eb;
    padding: 10px;
  }
</style>

<div>Dashed right</div>

<style>
  div {
    border-right: 6px double #0f766e;
    padding: 10px;
  }
</style>

<div>Double right</div>

Key Takeaways