CSS border-right-style Property

The border-right-style property in CSS is used to specify the style of the right border of an element. It controls how the right border appears, such as solid, dotted, or dashed.

• It supports values like solid, dashed, dotted, double, groove, etc.
• The border is visible only when a valid style (not none or hidden) is applied.
• It is typically used along with border-right-width and border-right-color for full border styling.

Syntax:

border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit; 

Default Value: none

Property Values:

• none: It is the default value and it makes the width of right border to zero. Hence, it is not visible.
• hidden : It is used to make right border invisible, like none, except in case of border conflict resolution of table elements.
• dotted : It is used to make the right border with a series of dots.
• dashed : It makes the right border with a series of short line segments.
• solid : It is used to make the right border with a single solid line segment.
• double : This property makes the right border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them.
• groove : It makes the right border with a grooved line segment, which makes us feel that it is going inside.
• inset : It makes the right border with an embedded line segment, which makes us feel that it is fixed deeply on the screen.
• outset : It is opposite of inset. It makes the right border with a line segment, which appears to be coming out.
• inherit : It makes the right-border-style property to be inherited from its parent element.

Example: Here, we are using the border-right-style: none property.

Output:

👁 CSS | Property | border-right-style-none

Example: Here, we are using border-right-style: hidden property.

Output:

👁 CSS | Property | border-right-style-hidden

Example: Here, we are using border-right-style: dotted; property.

Output:

👁 CSS | Property | border-right-style-dotted

Example: Here, we are using border-right-style: dashed property.

Output:

👁 CSS | Property | border-right-style-dashed

Example: Here, we are using border-right-style: solid property.

Output:

👁 CSS | Property | border-right-style-solid

Example: Here, we are using border-right-style: double property.

Output:

👁 CSS | Property | border-right-style-double

Example: Here, we are using border-right-style: groove; property.

Output:

👁 CSS | Property | border-right-style-groove

Example: Here, we are using border-right-style: inset; property.

Output:

👁 CSS | Property | border-right-style-inset

Example: Here, we are using border-right-style: outset property.

Output:

👁 CSS | Property | border-right-style-outset

Example: Here, we are using border-right-style: inherit; property.

Output:

👁 CSS | Property | border-right-style-inherit