CSS 'border-right' Property Explained

The CSS 'border-right' property is a shorthand specifying an element's right border's width, style, and color. By combining these three border properties into a single declaration, the process of defining the appearance of an element's right border is simplified, making it easier to create visually appealing and consistent designs.

CSS 'border-right' Property Examples

See the Pen CSS 'border-right' Property by Webzstore (@webzstore) on CodePen.

The 'border-right' property offers a powerful and flexible way to customize the appearance of an element's right border, supporting the creation of visually engaging and distinct designs.

Browser Support For 'border-right' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-right for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-right' Property

border-right: width style color | initial | inherit;

Usage of the 'border-right' Property

Utilize 'border-right' to set or modify the characteristics of an element's right border. This property is especially useful for adding emphasis, creating visual separation, or enhancing the aesthetics of an element within a page layout.

Property Values of the 'border-right' Property

• Width: Specifies the thickness of the right border. It can be defined using length units (e.g., px, em) or predefined keywords (thin, medium, thick).
• Style: Determines the line style of the right border (none, solid, dotted, dashed, double, etc.).
• Color: Sets the color of the right border using standard CSS color values (named colors, HEX, RGB(a), HSL(a)).
• Initial: Resets the 'border-right' to its default value.
• Inherit: Inherits the 'border-right' from the parent element.