CSS border-right-width Property

This property defines the thickness of the right border of an element's box.

selector { border-right-width: value; }
thin Renders a thin right border, which is typically 1px across most browsers.
medium The default thickness for borders, usually resulting in a 3px width.
thick Renders a thick right border, which is typically 5px in size.
<length> Allows for precise thickness control using units such as px, em, rem, or vh.

Code Examples

A basic example showing a 10px thick right border applied directly to a div element.

<div style="border-right-style: solid; border-right-width: 10px; border-right-color: #333333; padding: 20px;">
  This box features a 10px solid right border.
</div>

An advanced example using JavaScript to dynamically update the border thickness and color when a user interacts with the element.

<div id="infoBox" style="border-right: 2px solid #0066cc; padding: 15px; width: 300px;">
  Hover over me to thicken my right border wall.
</div>

<script>
const infoBox = document.getElementById("infoBox");
infoBox.addEventListener("mouseenter", () => {
  infoBox.style.borderRightWidth = "10px";
  infoBox.style.borderRightColor = "#ff0000";
});
infoBox.addEventListener("mouseleave", () => {
  infoBox.style.borderRightWidth = "2px";
  infoBox.style.borderRightColor = "#0066cc";
});
</script>

Pro Tip

If you are designing a vertical navigation menu, you can use a thick right border on the active link to create a simple, clean indicator without needing extra HTML elements or complex background images.

Deep Dive

Think of an element as a room where you are thickening just the right-hand wall. This property specifically targets that single side. For this to even show up, the "border-right-style" must be set to something visible like "solid" or "dashed". By default, the width is "medium", but without a style, the width is effectively zero. In the standard box model, increasing this value adds to the total width of your element, which can shift other elements on your page.

Best Practices

Stick to pixel units for borders if you want crisp, predictable lines that do not blur. If you are building a layout where the border should scale with the text, use "em" units. To keep your CSS file lean, only use this specific property if you are targeting just the right side; otherwise, use the "border-width" shorthand for all four sides.

Common Pitfalls

The most common mistake is setting a width and wondering why the border is invisible. You must define a "border-right-style" because the default is "none". Also, be aware that using keywords like "thin" or "thick" can lead to slight variations in appearance between different browsers, as the exact pixel count for those keywords is not strictly defined by the spec.

Accessibility

Ensure the thickness and color of the border provide enough visual contrast against the background so users with low vision can clearly see the element's boundaries. Using borders can be a great way to visually group related content, making it easier for users to scan the page structure.

Dev Data Table: border-right-width property

default medium
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 document.getElementById("myElem").style.borderRightWidth = "5px";
js_syntax_2 document.getElementById("myElem").style.setProperty("border-right-width", "5px");
js_note When setting this value in JavaScript, always include the unit string like "px" or "em" to ensure the browser applies the style correctly.
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 }
results render here...