The `border-right-style` property in CSS is a fundamental layout and design tool used to define the line style of an element's right border. Whether you want to create a solid divider, a dashed line, or a subtle inset effect, this property gives you precise control over the visual appearance of the right edge of any HTML element.
In modern web design, `border-right-style` is frequently used to create vertical dividers in navigation bars, sidebar separations, and column layouts without affecting the other three sides of the element.
---
## Syntax and Values
The `border-right-style` property accepts a single keyword value. By default, the border style is set to `none`, which means no border will be visible unless a style is explicitly defined.
### Syntax
```css
.element {
border-right-style: value;
}
```
### Property Values
| Value | Description | Visual Result |
| :--- | :--- | :--- |
| `none` | No border is displayed. The border width resolves to `0`. (Default) | Invisible |
| `hidden` | Same as `none`, but resolves border conflicts differently in CSS tables. | Invisible |
| `solid` | A single, solid straight line. | `──────` |
| `dashed` | A series of short line segments (dashes). | `- - - -` |
| `dotted` | A series of round dots. | `. . . .` |
| `double` | Two parallel solid lines. (Requires a `border-right-width` of at least `3px` to be visible). | `======` |
| `groove` | A 3D grooved effect. The appearance depends on the border color. | Carved-in look |
| `ridge` | A 3D ridged effect. Opposite of `groove`. | Extruded look |
| `inset` | A 3D inset effect. Makes the element look embedded. | Sunken look |
| `outset` | A 3D outset effect. Makes the element look raised. | Embossed look |
| `inherit` | Inherits the `border-right-style` from its parent element. | Varies |
---
## Code Example
The following complete HTML and CSS example demonstrates how to use various `border-right-style` values to create different UI components, such as a vertical navigation divider and styled content cards.
```html
CSS border-right-style Demo
CSS border-right-style Examples
Solid Style
This card uses a solid right border. It is clean, modern, and highly visible.
Dashed Style
This card uses a dashed right border. Great for coupon cutouts or placeholder states.
Dotted Style
This card uses a dotted right border. It offers a softer, playful separation style.
Double Style
This card uses a double right border. It requires a thicker width to render properly.
```
---
## Best Practices and Common Pitfalls
### 1. Always Define `border-right-width` and `border-right-color`
A common mistake among beginners is setting `border-right-style` and wondering why the border does not appear. By default, the browser's default border width is `medium` and the default color is `currentcolor` (usually black). However, to guarantee consistent cross-browser rendering, always explicitly define all three properties, or use the shorthand `border-right` property:
```css
/* Individual properties */
.element {
border-right-style: solid;
border-right-width: 2px;
border-right-color: #333;
}
/* Shorthand equivalent */
.element {
border-right: 2px solid #333;
}
```
### 2. Double Borders Require Adequate Width
If you set `border-right-style: double`, the browser needs enough pixels to render two distinct lines and the space between them. If your `border-right-width` is set to `1px` or `2px`, the browser will render it as a single solid line. Ensure you use a width of at least `3px` (ideally `4px` or more) for the double effect to be visible.
### 3. Consider Logical Properties for Multi-Language Sites
If your website supports Right-to-Left (RTL) languages like Arabic or Hebrew, hardcoding `border-right-style` can break your layout when mirrored. Instead, use CSS Logical Properties.
Use `border-end-end-radius` and **`border-inline-end-style`** instead of `border-right-style`. This automatically flips the border to the left side when the document direction is set to RTL:
```css
/* Modern, localization-friendly approach */
.element {
border-inline-end-style: solid;
border-inline-end-width: 4px;
border-inline-end-color: red;
}
```
YouTip