The border-right-style
CSS property sets the line style of an element's right border
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 definition
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<line-style>where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Border styles
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. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-right-style | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 5.5 | Opera Full support 9.2 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
14
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
See also
- The other style-related border properties:
border-bottom-style
,border-left-style
,border-top-style
, andborder-style
. - The other bottom-border-related properties:
border-right
,border-right-color
, andborder-right-width
.