Tag border-right

👉 CSS border-right: Styling the Right Border of Your Elements

When designing web layouts, controlling individual borders can add subtle design touches or create clearly defined structures. The border-right property lets you apply a custom border to the right side of an element, all in one line.

🧾 What is border-right?

border-right is a shorthand CSS property that allows you to set the width, style, and color of the right border of an element.

It’s part of the four-side border family:

  • border-top
  • border-right
  • border-bottom
  • border-left

🧬 Syntax

selector {
  border-right: <border-width> <border-style> <border-color>;
}

Each part is optional:

  • <border-width>: e.g. 2px, medium, thin
  • <border-style>: e.g. solid, dashed, none
  • <border-color>: e.g. blue, #ccc, rgba(0,0,0,0.5)

🎯 Examples

1. Solid right border

.box {
  border-right: 3px solid #555;
}

Adds a 3px solid dark gray border to the right edge.

2. Dashed right border with a custom color

div.content {
  border-right: 2px dashed orange;
}

Creates a decorative dashed orange right border.

3. Border-right used with other borders

.container {
  border: 1px solid #ccc;
  border-right: 4px double #333;
}

Overrides the general border style on the right side with a thicker double line.

🔍 How It Works

  • If no border-style is defined (or if it’s set to none), the border will not be visible even if width and color are set.
  • You can override individual sides with border-right even when using the shorthand border.

🛠️ Practical Uses

  • Separating UI sections like sidebars and content areas.
  • Highlighting selected items by emphasizing one edge.
  • Visual indicators for active states in menus or lists.
  • Styling form fields with custom right borders.

✅ Browser Support

border-right is supported by all major browsers, including:

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

🔚 Conclusion

The CSS border-right property is a handy shorthand to style the right border of any HTML element. Whether you’re aiming for subtle dividers or bold emphasis, this property helps you apply consistent, precise styling with minimal code.