Webzstore
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
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 9.2 | Apr 2007 |
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-style for the full compatibility details, including mobile browsers.
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.
