1. css
  2. /properties
  3. /border-right

border-right

Definition

In CSS, the border-right property sets the width, style, and color of the right border of an element. It is a shorthand property that can be used to set all of these values at once, or individually with the border-right-width, border-right-style, and border-right-color properties. For example, border-right: 2px solid red; sets a 2px solid red right border on the element.

Examples

To set a solid red border on the right side of an element with the id "my-element":

#my-element {
  border-right: solid red;
}

To set a 3px dashed blue border on the right side of all <p> elements:

p {
border-right: 3px dashed blue;
}

To set a 5px double green border on the right side of a class "highlighted" elements

.highlighted {
border-right: 5px double green;
}

Values

ValueDescription
noneNo border
<br-width>Width of the border. The width can be set in px, pt, cm, em, etc.
<br-style>Style of the border. Possible values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
<color>Color of the border. It can be set by name, hex, rgba or hsla values.

Best Practices

  • Use clear and consistent naming conventions for your classes and ids to make it easy to understand which elements have a border-right applied.
  • To keep your code organized, consider using a CSS preprocessor such as SASS or LESS, which allows you to use variables for colors and border widths.
  • Use the border-right-width, border-right-style, and border-right-color properties separately to increase the readability of your code and make it easier to make changes.
  • Use the box-sizing property to ensure that the border does not affect the overall size of the element, and that it is contained within the element's dimensions.
  • Use the border-right property in conjunction with the border-left, border-top, and border-bottom properties to create a consistent border around an element.
  • Be mindful of accessibility when using borders; for example, ensure that there is enough contrast between the border and the background color for users with visual impairments.
  • Test your border-right design on different screen sizes and browsers to make sure it looks consistent across all platforms.
  • Use CSS frameworks such as Bootstrap and Foundation, which provide pre-built styles and classes for creating consistent borders.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes