CSS - border-right-style
The border-right-style
CSS property sets the line style of the right border of a box.
Example
HTML Content
HTML
Copy Code
<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 Content
CSS
Copy Code
/* 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;}
Output
Syntax
CSS
Copy Code
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; border-right-style: inherit;
Values
<br-style>
- Is a keyword describing the style of the bottom border. It can have the following values:
none
Like for the hidden
keyword, displays no border. In that case, except if a background image is set, the calculated values ofborder-right-width
will be0
, even if specified otherwise through the property. In case of table cell and border collapsing, thenone
value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.hidden
Like for the none
keyword, displays no border. In that case, except if a background image is set, the calculated values ofborder-right-width
will be0
, even if specified otherwise through the property. In case of table cell and border collapsing, thehidden
value has the highest priority: it means that if any other conflicting border is set, it won't be displayed.dotted
Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated border-right-width
.dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. solid
Displays a single, straight, solid line. double
Displays two straight lines that add up to the pixel amount defined as border-width
orborder-right-width
.groove
Displays a border leading to a carved effect. It is the opposite of ridge
.ridge
Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove
.inset
Displays a border that makes the box appear embedded. It is the opposite of outset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likegroove
.outset
Displays a border that makes the box appear in 3D, embossed. It is the opposite of
inset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likeridge
. inherit
- Represents the border style used by the parent of the current element.
Formal syntax
CSS
Copy Code
<a href="css/border-right-style#br-style"><br-style></a><p>where <br><code><br-style> = none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> hidden <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> dotted <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> dashed <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> solid <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> double <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> groove <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ridge <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> inset <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> outset</code></p>
Description
The border-right-style
CSS property sets the line style of the right border of a box.
The specification doesn't define how borders of different styles connect in the corners.
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0[1] | 5.5 | 9.2 | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 14[1] | 7.0 | (Yes) | (Yes) |
[1] Prior to Firefox 50, border styles of rounded corners (with border-radius
) were always rendered as if border-right-style
was solid
. This has been fixed in Firefox 50.
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
.
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/border-right-style