Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)

CSS 'border-right' Property Explained

Est. Reading: 1 minute
Posted: April 10, 2024

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

FirefoxSafariChromeMicrosoft EdgeOpera
1.01.01.04.03.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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

chevron-down