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
 |  |  |  |  |
| 1.0 | 1.0 | 1.0 | 4.0 | 3.5 |
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.
Leave a Reply