CSS border-right Property

What You’ll Learn

The border-right property sets the width, style, and color of the physical right border in one shorthand rule.

Definition and Usage

The border-right CSS property is a physical shorthand that sets the border on the right side of an element. It combines border-right-width, border-right-style, and border-right-color in one declaration.

Unlike logical properties such as border-inline-end, border-right always targets the physical right edge — even in RTL text. That makes it straightforward for classic LTR layouts, sidebar dividers, and right accent dividers.

📝 Syntax

border-right accepts border width, style, and color like other border shorthands:

selector {
  border-right: width style color;
}

Basic Example

.box {
  border-right: 5px solid red;
}

Syntax Rules

• Sets width, style, and color for the right border side only.
• Omitted components use initial values: medium, none, currentcolor.
• Any valid border width, style, and color values are accepted.
• Always affects the physical right side, regardless of direction or writing-mode.
• Use longhands when you need to set only width, style, or color on the right side.

Default Value

The default value of border-right is medium none currentcolor. No visible border appears until you set a non-none style and a width greater than zero.

💎 Property Values

Common Value Types

Right Border and Text Direction

border-right always draws on the physical right side. Text direction does not move the border — compare with logical properties when building RTL layouts.

border-right vs related properties

Examples Gallery

Try border-right with solid red borders, sidebar dividers, RTL comparison, and dashed styles.

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

<div class="box">
  This box has a 5px solid red right border.
</div>

.panel {
  max-width: 16rem;
  padding: 0.75rem 1rem;
  border-right: 4px solid #2563eb;
  background: #eff6ff;
  color: #334155;
}

<style>
  .rtl-box {
    direction: rtl;
    padding: 0.75rem 1rem;
    border-right: 4px solid #059669;
    background: #ecfdf5;
  }
</style>

<div class="rtl-box">
  حد فيزيكي على اليسار
</div>

.note {
  padding: 0.75rem 1rem;
  border-right: 3px dashed #7c3aed;
  background: #faf5ff;
}

💡 Best Practices