CSS border-right-width Property

What You’ll Learn

The border-right-width property sets how thick the right border is on an element. It is useful when you want precise control over sidebar dividers and right-edge accents.

Definition and Usage

The border-right-width CSS property allows you to specify the thickness of the right border of an element. This property is part of the border longhand family and is used to control the width of the border along the right edge.

By adjusting this property, you can enhance visual separation between elements and create more defined layouts with subtle 1px dividers or prominent accent lines.

📝 Syntax

The syntax for border-right-width is straightforward. It accepts keyword values or length units.

selector {
  border-right-width: <length> | thin | medium | thick;
}

Basic Example

div {
  border-style: solid;
  border-right-width: 10px;
  border-color: black;
}

The value can be a keyword such as thin or a length such as 10px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-right-style and border-right-color for full control.
• Use border-right shorthand when setting width, style, and color together.

Default Value

The default value of border-right-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-right-width property accepts keyword values and length units.

Right Border Width and Text Direction

border-right-width always sets the thickness of the physical right border. Text direction does not move the border — compare with border-inline-end-width when building RTL layouts.

border-right-width vs border-inline-end-width

Examples Gallery

Try border-right-width with pixel lengths, keyword sizes, width comparisons, and right-edge overrides.

<style>
  div {
    border-style: solid;
    border-right-width: 10px;
    border-color: black;
    padding: 0.75rem 1rem;
  }
</style>

<div>This div has a right border width of 10px.</div>

<style>
  .sidebar {
    border-right-width: thin;
    border-right-style: dashed;
    border-right-color: blue;
    padding: 0.75rem 1rem;
  }
</style>

<div class="sidebar">This sidebar panel has a thin right border.</div>

.w-1 {
  border-right: 1px solid #64748b;
}
.w-4 {
  border-right-width: 4px;
  border-right-style: solid;
  border-right-color: #2563eb;
}
.w-8 {
  border-right: 8px solid #dc2626;
}

.card {
  border: 1px solid #cbd5e1;
  border-right-width: 6px;
  border-right-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

💡 Best Practices