CSS border-right-style Property

What You’ll Learn

The border-right-style property defines the line style of the right border on an element. It is useful when you want the right edge styled differently from the other sides.

Definition and Usage

The border-right-style CSS property specifies the style of the right border of an element. This property allows you to control the appearance of the right edge, enhancing design and visual hierarchy on your web pages.

By choosing different border styles such as solid, dashed, or dotted, you can create a variety of effects for sidebar dividers, callouts, navigation accents, and right-edge highlights.

📝 Syntax

The syntax for border-right-style is straightforward:

selector {
  border-right-style: <border-style>;
}

Basic Example

p {
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #000;
}

The style value refers to the border line type, such as solid, dashed, or dotted.

Syntax Rules

• The initial value is none, which hides the right border.
• Common values include solid, dashed, and dotted.
• 3D-style keywords include groove, ridge, inset, and outset.
• Pair with width and color longhands, or use the border-right shorthand.
• Related longhands: border-right-width and border-right-color.

Default Value

The default value of border-right-style is none, meaning no right border is displayed until you choose a visible style.

💎 Property Values

The border-right-style property accepts standard CSS border style keywords.

Right Border Style and Text Direction

border-right-style always styles the physical right side. Text direction does not move the border — compare with border-inline-end-style when building RTL layouts.

border-right-style vs border-inline-end-style

Examples Gallery

Try border-right-style with solid, dashed, dotted, and double right borders.

<style>
  .box {
    border-right-style: solid;
    border-width: 5px;
    border-color: #3498db;
    padding: 20px;
    width: 200px;
  }
</style>

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

<style>
  .border-examples div {
    border-right-width: 2px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }
  .solid {
    border-right-style: solid;
    border-right-color: #3498db;
  }
  .dotted {
    border-right-style: dotted;
    border-right-color: #e74c3c;
  }
  .dashed {
    border-right-style: dashed;
    border-right-color: #2ecc71;
  }
  .double {
    border-right-style: double;
    border-right-color: #f39c12;
  }
</style>

<div class="border-examples">
  <div class="solid">Solid Border Right</div>
  <div class="dotted">Dotted Border Right</div>
  <div class="dashed">Dashed Border Right</div>
  <div class="double">Double Border Right</div>
</div>

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

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

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

💡 Best Practices