CSS border-right-style Property

This property defines the line pattern or texture used for the right-hand edge of an element's border box.

selector { border-right-style: value; }
none Specifies that no border should be drawn, and the computed width is zero.
hidden Identical to none, but specifically used to resolve border conflicts in table elements.
dotted Renders the right border as a series of round dots.
dashed Renders the right border as a series of short rectangular segments.
solid Renders the right border as a single continuous line.
double Renders two parallel solid lines with a space between them that equals the border width.
groove Displays a border that looks like it is carved into the page using light and dark shading.
ridge Displays a border that looks like it is extruded or coming out of the page.
inset Makes the element appear as though it is embedded into its parent container.
outset Makes the element appear as though it is popping out of its parent container.

Code Examples

A basic example showing a 5-pixel wide red dashed line on the right side of a div.

div {
  border-right-width: 5px;
  border-right-color: #ff0000;
  border-right-style: dashed;
}

An advanced example using JavaScript to dynamically toggle the right border style and color between solid and double.

<div id="box" style="padding: 20px; border-right: 10px solid #333333;">
  Interact with the right border style
</div>
<button onclick="changeStyle()">Toggle Style</button>

<script>
function changeStyle() {
  const el = document.getElementById("box");
  if (el.style.borderRightStyle === "solid") {
    el.style.borderRightStyle = "double";
    el.style.borderRightColor = "#0000ff";
  } else {
    el.style.borderRightStyle = "solid";
    el.style.borderRightColor = "#333333";
  }
}
</script>

Pro Tip

You can use 'border-right-style' to create vertical dividers between navigation links without adding extra HTML markup. Just apply a right border to your list items and then use the :last-child pseudo-selector to set the style to 'none' on the very last item, preventing a trailing divider at the end of the menu.

Deep Dive

Think of border-right-style as selecting the specific 'brush' for the right side of your box. While the shorthand 'border' property sets all four sides, this specific property allows you to isolate just the right edge. It is important to realize that the default value is 'none'. Even if you give an element a 'border-right-width' of 20px and a bright red color, nothing will show up on your screen until you define a style. The 3D styles like 'groove', 'ridge', 'inset', and 'outset' achieve their effect by automatically calculating lighter and darker shades of your defined 'border-right-color'.

Best Practices

If you are setting the same style for all four sides, use the 'border-style' shorthand to keep your CSS clean and lean. Only use 'border-right-style' when you specifically need that edge to look different or if you are overriding a general style from a framework. Always ensure you have a 'border-right-width' and 'border-right-color' defined, otherwise the browser might not render what you expect or it might default to 'medium' thickness and the text color.

Common Pitfalls

The most common headache for beginners is the 'invisible border' mystery. Because the default style is 'none', your border won't exist in the rendering engine until the style is set to something else. Another catch is with the 'double' style; it only actually looks like two lines if your 'border-right-width' is at least 3px wide, because it needs enough pixels to draw two lines and the gap between them.

Accessibility

Don't use border styles as the only way to communicate important information to the user. For example, using a 'dashed' border to represent a 'draft' state might not be noticed by users with visual impairments. Also, the 3D styles like 'groove' and 'ridge' can be very subtle and hard to distinguish on low-contrast screens.

Dev Data Table: border-right-style property

default none
animatable no
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 object.style.borderRightStyle = "solid";
js_syntax_2 object.style.setProperty("border-right-style", "solid");
js_note In JavaScript, you must use camelCase for the property name when accessing the style object directly.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...