border-right

Published Jun 28, 2021Updated Oct 20, 2023
Contribute to Docs

Shorthand property that defines the width, color, and style of the right border of an element.

Syntax

border-right: <value>;

By default, border-right will have a style of none and a width of medium. The default color is the value of the color property or text color.

<value> can be one of the following:

  • border-style changes the shape or design of the border to one of the 10 available styles.
  • border-width changes the thickness of the border.
  • border-color changes the border color.

Note: values can be provided in any order.

Example 1

Set the right border of the h1 element to be green, 3 pixels thick, and dotted:

h1 {
width: fit-content;
border-right: green 3px dotted;
}

Example 1

Example 2

Set the right border of the h1 element to be 4 pixels thick, dashed, and blue:

h1 {
width: fit-content;
border-right: 4px dashed #0000ff;
}

Example 2

Example 3

Set the right border of the h1 element to be solid and black. Since a width is not specified, it will default to medium.

h1 {
width: fit-content;
border-right: rgb(0, 0, 0) solid;
}

Example 3

All contributors

Looking to contribute?

Learn CSS on Codecademy