Skip to content
Related Articles

Related Articles

CSS | border-right-style Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jul, 2022
View Discussion
Improve Article
Save Article

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: 
     

CSS | Property | border-right-style-none

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: 
     

CSS | Property | border-right-style-hidden

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: 
     

CSS | Property | border-right-style-dotted

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: 
     

CSS | Property | border-right-style-dashed

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: 
     

CSS | Property | border-right-style-solid

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: 
     

CSS | Property | border-right-style-double

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: 
     

CSS | Property | border-right-style-groove

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: 
     

CSS | Property | border-right-style-inset

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: 
     

CSS | Property | border-right-style-outset

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: 
     

CSS | Property | border-right-style-inherit

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!