CSS border-right Property

The border-right property controls the visual border that appears along the right edge of a box. It acts as a single-place shorthand for the three longhands that determine the right edge’s width, style and color - border-right-width, border-right-style and border-right-color - and can be used either to override those longhands or to inherit their combined effect. As part of the box model, the right border is conceptually the region between the element’s margin and padding on that side; it is what you see when the element’s outline or inner content is separated from surrounding elements on the right.

Visually and in layout terms, the right border participates in painting and in the element’s computed box size: in the default sizing model the border contributes to the element’s overall outer dimensions, while using a different sizing model may cause borders to be included inside the declared size - see box-sizing for how that interaction works. The border is part of the standard stacking/painting order and will be affected by background, clipping and overflow rules; if you need a decoration that doesn’t affect layout you would use outline instead, since outlines are drawn without occupying space in the box model.

There are several features that change how the right border is rendered. If an image-based border mechanism is used, such as border-image, that image can replace or modify the appearance of the right edge rather than the simple line drawing the longhands produce. Rounded corners created with border-radius will clip or curve the right border where it meets the corners, so the apparent shape of the right edge depends on corner radii as well as border characteristics. For table elements, border behavior can be further modified by table-specific settings like border-collapse, which affects how adjacent cell borders are combined.

In practice, designers often use the right border to create separators, dividers or to emphasize the right side of a component without adding extra markup. For layouts that must adapt to different writing directions, consider the logical-property alternative border-inline-end which maps to the appropriate physical side (right or left) depending on text direction; this helps make designs more robust for internationalization. Finally, remember that the right border’s final appearance results from the combination of its individual longhand settings, any shorthand overrides such as border, and interactions with other visual properties and the surrounding layout context.