CSS ‘border-right-style’ Property Explained

The CSS ‘border-right-style‘ property defines the style of an element’s right border. This property allows for the customization of the right border’s appearance, including whether it is solid, dashed, dotted, or any other available border style. Thus, designers can create distinct visual effects on the right side of an element.

CSS ‘border-right-style’ Property Examples

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

The ‘border-right-style‘ property is a powerful tool for customizing the appearance of an element’s right border, supporting the creation of visually engaging and distinct designs.

Browser Support For ‘border-right-style’ Property

1.0	1.0	1.0	4.0	3.5

CSS Syntax of the ‘border-right-style’ Property

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Usage of the ‘border-right-style’ Property

Use ‘border-right-style‘ to set or change the appearance of an element’s right border. This is particularly useful for emphasizing the right edge of an element, distinguishing it from other parts of a layout, or aligning the border style with a design’s overall aesthetic.

Property Values of the ‘border-right-style’ Property

• None: The border is invisible.
• Hidden: Similar to none, but used in table contexts to hide borders.
• Dotted: The border appears as a series of dots.
• Dashed: The border is a series of short dashes.
• Solid: A single, solid line forms the border.
• Double: The border consists of two solid lines with a space between them.
• Groove: The border looks as if it were carved into the surface.
• Ridge: The border appears to protrude from the surface.
• Inset: The border makes the element look embedded in the page.
• Outset: The border gives the impression that the element stands out from the page.
• Initial: Resets the ‘border-right-style‘ to its default value.
• Inherit: Inherits the ‘border-right-style‘ from the parent element.