The border-right-style CSS property sets the line style of an element's right border.

Note: The specification doesn't define how borders of different styles connect in the corners.

Syntax

/* Keyword values */
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/* Global values */
border-right-style: inherit;
border-right-style: initial;
border-right-style: unset;

The border-right-style property is specified as a single keyword chosen from those available for the border-style property.

Formal syntax

<line-style>

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

Examples

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 2px;
  background-color: #52E385;
}
tr, td {
  padding: 3px;
}

/* border-right-style example classes */
.b1 {border-right-style: none;}
.b2 {border-right-style: hidden;}
.b3 {border-right-style: dotted;}
.b4 {border-right-style: dashed;}
.b5 {border-right-style: solid;}
.b6 {border-right-style: double;}
.b7 {border-right-style: groove;}
.b8 {border-right-style: ridge;}
.b9 {border-right-style: inset;}
.b10 {border-right-style: outset;}

Result

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-right-style' in that specification.
Candidate Recommendation No significant change.
CSS Level 2 (Revision 1)
The definition of 'border-right-style' in that specification.
Recommendation Initial definition.

Initial valuenone
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android Full support YesChrome Android ? Edge Mobile Full support YesFirefox Android Full support 14
Notes
Full support 14
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Last updated by: ddbeck,