CSS border-right-style

The CSS border-right-style property allows you to set the style of a right border.

You can also use border-style to set the style for all sides of your element, or border-right to set all border properties for the right border.

You can use the border-right-color or border-color properties to set the color of the border. If you don't set a color, the default will be currentColor (i.e. whatever the value of the color property is).

Also, the default width of a border is medium. You can specify the width using either the border-right-width or border-width properties.


border-right-style: <line-style>


<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Details on these values below.

Possible Values


No border. Color and width are ignored. Therefore, the border's width is 0, and the initial value of border-image-width will also resolve to zero.

Same as none, but in the collapsing border model (border-collapsed tables), also inhibits any other border. In other words, when multiple edges come together with different border settings (for example, a table and a td, each with their own border settings), if any one of those is hidden, it will prevent any border at that edge. This is different to none, in that all elements meeting that edge must have none before the border is omitted.
A series of round dots.
A series of square-ended dashes.
A single line segment.
Two parallel solid lines with some space between them. When using this value, the border-width value determines the sum of the lines and the space between them.
Looks as if it were carved in the canvas.
Looks as if it were coming out of the canvas.
Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model.
Looks as if the content on the inside of the border is coming out of the canvas. Treated as groove in the collapsing border model.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
Applies To
All elements.

Example Code

/* Set 3 border properties */
div {
  border-right-width: 1px;
  border-right-style: dotted;
  border-right-color: orange;

Official Specifications