CSS border-right-style Property

CSS border-right-style Property

The border-right-style property in CSS defines the style of the right border of an element. It works alongside border-right-width and border-right-color to fully control the right border appearance.

1. Syntax

selector {
  border-right-style: value;
}

Value Options:

Value	Description
none	No border (default).
solid	A single, continuous border.
dotted	A border consisting of dots.
dashed	A border consisting of dashes.
double	Two solid borders with a small gap between them.
groove	A 3D grooved border.
ridge	A 3D ridged border (opposite of groove).
inset	A 3D border that makes the element appear embedded.
outset	A 3D border that makes the element appear raised.
hidden	Similar to none, but may still affect table layouts.

2. Example – Setting border-right-style

div {
  border-right-style: solid;
  border-right-width: 5px;
  border-right-color: blue;
}

<div>
  This div has a solid blue right border with a width of 5px.
</div>

✅ The right border will be solid, blue, and 5px wide.

3. Example – Using Different Border Styles

.box1 { border-right-style: dotted; }
.box2 { border-right-style: dashed; }
.box3 { border-right-style: double; }
.box4 { border-right-style: groove; }

✅ Each element will have a different right border style.

4. Example – Removing the Right Border

div {
  border-right-style: none; /* Removes the right border */
}

✅ The right border will not be visible.

5. Best Practices

✔ Always combine border-right-style with border-right-width and border-right-color for a visible border.
✔ Use border-right shorthand to define all properties in one line:

border-right: 4px solid black;

✔ Use none instead of hidden unless working with table layouts.