CSS border-right Property

The border-right property is a shorthand that sets the width, style, and color for the right edge of an element's box in a single declaration.

selector { border-right: <line-width> <line-style> <color>; }
<line-width> Sets the thickness of the border using length units like px, em, or keywords like thin, medium, and thick.
<line-style> Specifies the pattern of the border line, such as solid, dashed, dotted, or double.
<color> Defines the color of the border using hex, RGB, HSL, or named color keywords.
initial Resets the property to its default system value.
inherit Adopts the border-right settings of the parent element.

Code Examples

A basic example showing a solid 5px red border applied to the right side of a div.

<div style="border-right: 5px solid #ff0000; padding: 20px; background-color: #f0f0f0;">
  This box has a thick red line on its right side.
</div>

An advanced example using a vertical separator for navigation items that highlights the right border of the active item using JavaScript.

<style>
  .nav-item {
    padding: 10px 20px;
    display: inline-block;
    cursor: pointer;
    border-right: 2px solid #cccccc;
    transition: border-color 0.3s;
  }
  .nav-item:last-child {
    border-right: none;
  }
</style>

<div id="menu">
  <div class="nav-item" onclick="highlight(this)">Home</div>
  <div class="nav-item" onclick="highlight(this)">Services</div>
  <div class="nav-item" onclick="highlight(this)">Contact</div>
</div>

<script>
  function highlight(el) {
    const items = document.querySelectorAll(".nav-item");
    items.forEach(item => item.style.borderRight = "2px solid #cccccc");
    el.style.setProperty("border-right", "2px solid #007bff");
  }
</script>

Pro Tip

You can create a clean vertical divider between navigation items by applying a border-right to all list items and then removing it from the very last one using the :last-child pseudo-class. This prevents an unwanted line at the end of your menu. You can also use a very thick border-right with a transparent color or a matching background color to create 'invisible' hit areas or structural spacing without using extra margins.

Deep Dive

Think of an element like a framed picture hanging on a wall. The border-right property allows you to customize just the right side of that frame without touching the other three sides. It acts as a container for border-right-width, border-right-style, and border-right-color. In the CSS box model, this border sits between the padding and the margin. If you leave out the color, it defaults to the text color (currentcolor). If you leave out the style, the border will not appear at all because the default style is none. When the browser renders this, it calculates the space required for the border and adds it to the total width of the element, unless you have box-sizing set to border-box.

Best Practices

Always use this shorthand to keep your CSS clean and readable instead of writing out three separate properties. Stick to consistent units like pixels or rems for the width to maintain a uniform look across your UI. If you are using borders to separate columns, ensure you have a fallback for older browsers by specifying a default color. It is also wise to use CSS variables for your border colors so you can update your entire theme from a single location.

Common Pitfalls

The most common mistake is forgetting the border-style. If you define a width and a color but omit the style, the border remains invisible because it defaults to none. Another issue involves the box model; by default, adding a border increases the total width of your element. This can cause your layout to break by pushing elements to the next line. To fix this, use box-sizing: border-box so the border is calculated within the width you specified.

Accessibility

Borders are vital visual markers that help users distinguish between different sections of content. Ensure the color used for border-right has a contrast ratio of at least 3:1 against the background to remain visible for users with low vision. Do not rely on border color alone to convey meaning, such as indicating a selected state; consider changing the border thickness or adding an icon to assist users who are colorblind.

Dev Data Table: border-right property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderRight = "3px solid #000000";
js_syntax_2 element.style.setProperty("border-right", "3px solid #000000");
js_note When using JavaScript to manipulate this shorthand, remember that missing values will revert to their defaults, which might unintentionally clear existing styles.
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...