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.

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                                

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • Output:
    CSS | Property | border-right-style-inherit

Supported Browsers: The browser supported by border-right-style property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.