Tag border-right-width

📏 CSS border-right-width: Defining the Thickness of the Right Edge

A well-placed border can draw attention, create hierarchy, and add balance to a layout. The border-right-widthproperty in CSS allows you to control the width (or thickness) of the right border of an element, giving you detailed visual control.

🧾 What is border-right-width?

border-right-width sets the thickness of the right border of an element. To actually see the border, you must also define a border-right-style (like solid, dashed, etc.).

🧬 Syntax

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

Accepted Values:

  • thin – A browser-defined thin line (usually ~1px)
  • medium – Default width (~3px in most browsers)
  • thick – Thicker line (~5px)
  • <length> – Exact size using units like px, em, rem, % (e.g., 5px, 0.2em)

🎯 Examples

1. Standard pixel width

.sidebar {
  border-right-style: solid;
  border-right-width: 4px;
  border-right-color: #333;
}

Creates a bold, dark right-hand border of 4px.

2. Using predefined keywords

div.note {
  border-right-style: dashed;
  border-right-width: thick;
  border-right-color: orange;
}

Creates a thick, dashed orange right border using the thick keyword.

3. Using em-based responsive sizing

.article {
  border-right-style: solid;
  border-right-width: 0.25em;
  border-right-color: teal;
}

Scales relative to font size — good for accessibility and responsive design.

🔍 Key Notes

  • The border won’t be visible unless you also set border-right-style to something other than none.
  • The total element width increases unless you use box-sizing: border-box.
  • You can override other styles with this property or use it inside the border-right shorthand.

🛠️ Tips and Best Practices

  • Use consistent widths across your layout to avoid visual clutter.
  • Combine with :hover or :focus to highlight elements dynamically.
  • Be cautious with large widths — they can shift layout if not managed with box-sizing.
  • Pair with border-radius for rounded border edges on the right.

✅ Browser Support

✅ border-right-width is fully supported in all major browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 8+

🔚 Conclusion

The border-right-width property gives you granular control over the right edge of your elements. Whether you’re subtly dividing content or making a visual statement, it’s an essential part of precise layout design.