CSS | border-right-style Property
The border-right-style property in CSS is used to change the appearance of the right line segment of the border of an element.
Default Value
- none
Syntax:
border-right-style: none|hidden|dotted|dashed|solid|double|groove| ridge|inset|outset|inherit;
Property Values:
none: It is the default value and it makes the width of right border to zero. Hence, it is not visible.
- Syntax:
border-right-style: none;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: none; } </style> </head> <body> <!-- border-right-style:none; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
hidden: It is used to make right border invisible, like none, except in case of border conflict resolution of table elements.
- Syntax:
border-right-style: hidden;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: hidden; } </style> </head> <body> <!-- border-right-style:hidden; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
dotted: It is used to make the right border with a series of dots.
- Syntax:
border-right-style: dotted;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: dotted; } </style> </head> <body> <!-- border-right-style:dotted; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
dashed: It makes the right border with a series of short line segments.
- Syntax:
border-right-style: dashed;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: dashed; } </style> </head> <body> <!-- border-right-style:dashed; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
solid: It is used to make the right border with a single solid line segment.
- Syntax:
border-right-style: solid;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: solid; } </style> </head> <body> <!-- border-right-style:solid; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
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.
- Syntax:
border-right-style: double;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-right-style */ border-right-style: double; } </style> </head> <body> <!-- border-right-style:double; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
groove: It makes the right border with a grooved line segment, which makes us feel that it is going inside.
- Syntax:
border-right-style: groove;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { border: 10px; border-style: solid; /* CSS Property for border-right-style */ border-right-style: groove; } </style> </head> <body> <!-- border-right-style:groove; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
inset: It makes the right border with an embedded line segment, which makes us feel that it is fixed deeply on the screen.
- Syntax:
border-right-style: inset;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { border: 10px; border-style: solid; /* CSS Property for border-right-style */ border-right-style: inset; } </style> </head> <body> <!-- border-right-style:inset; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
outset: It is opposite of inset. It makes the right border with a line segment, which appears to be coming out.
- Syntax:
border-right-style: outset;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style property </title> <!-- Internal CSS Style Sheet --> <style> h1 { border: 10px; border-style: solid; /* CSS Property for border-right-style */ border-right-style: outset; } </style> </head> <body> <!-- border-right-style:outset; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
inherit: It makes the right-border-style property to be inherited from its parent element.
- Syntax:
border-right-style: inherit;
- Example:
html
<!DOCTYPE html><html> <head> <title> CSS border-right-style Property </title> <!-- Internal CSS Style Sheet --> <style> body { border-right-style: dashed; } h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property | border-right-style */ border-right-style: inherit; } </style> </head> <body> <!-- border-right-style: inherit; --> <h1>GeeksForGeeks</h1> </body></html> |
- Output:
Supported Browsers: The browser supported by border-right-style property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 5.5
- Firefox 1.0
- Opera 9.2
- Safari 1.0
Please Login to comment...