CSS | border-bottom-style Property

The border-bottom-style property in CSS is used to set the style of bottom border of an element.

Syntax: 

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values:

  • none: It is the default value and it makes the width of bottom border to zero. Hence, it is not visible.

    Syntax:

    border-bottom-style: none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title> 
                CSS border-bottom-style property 
            </title> 
          
            <!-- Internal CSS Style Sheet -->
            <style> 
                h1 { 
                    color: green; 
                    text-align: center; 
                    border: 5px solid black; 
              
                    /* CSS Property for border-bottom-style */ 
                    border-bottom-style: none; 
                } 
            </style> 
          
        </head> 
          
        <body> 
            <!-- border-bottom-style:none; -->
            <h1>GeeksForGeeks</h1> 
        </body> 
    </html>                     

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • hidden: It is used to make bottom border invisible. It is similar to none value except in case of border conflict resolution of table elements.

    Syntax:
    

    border-bottom-style: hidden;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: hidden;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:hidden; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • dotted: It makes the bottom border with a series of dots.

    Syntax:
    

    border-bottom-style: dotted;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: dotted;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:dotted; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • dashed: It makes the bottom border with a series of short line segments.

    Syntax:
    

    border-bottom-style: dashed;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: dashed;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:dashed; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • solid: It is used to make the bottom border with a single solid line segment.

    Syntax:
    

    border-bottom-style: solid;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: solid;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:solid; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • double: It makes the bottom border to double solid line. In this case, the border width is equal to the sum of widths of the two line segments and the space between them.

    Syntax:
    

    border-bottom-style: double;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: double;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:double; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • groove: It makes the bottom border with a grooved line segment, which makes feel that it is going inside.

    Syntax:
    

    border-bottom-style: groove;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    border: 10px;  
    

                    border-style: solid;  
    

                      
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: groove;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:groove; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                                  
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • inset: It makes the bottom border with a embedded line segment, which make feel that it is fixed deeply on the screen.

    Syntax:
    

    border-bottom-style: inset;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    border: 10px;  
    

                    border-style: solid;  
    

                      
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: inset;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:inset; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                                  
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • outset: It is opposite of inset. It makes the bottom border with a line segment, which appears to be coming out.

    Syntax:
    

    border-bottom-style: outset;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    border: 10px;  
    

                    border-style: solid;  
    

                      
    

                    /* CSS Property for border-bottom-style */  
    

                    border-bottom-style: outset;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:outset; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                                  
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • initial: It sets the border-bottom-style property to its default value.

    Syntax:
    

    border-bottom-style: initial;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-botton-style property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property for border-botton-style */  
    

                    border-bottom-style: initial;  
    

                }  
    

            </style>  
    

          
    

        </head>  
    

          
    

        <body>  
    

            <!-- border-bottom-style:initial; -->
    

            <h1>GeeksForGeeks</h1>  
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

  • inherit: The border-bottom-style property to be inherited from its parent element.

    Syntax:
    

    border-bottom-style: inherit;
    

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html>  
    

    <html>  
    

        <head>  
    

            <title>  
    

                CSS border-bottom-style Property  
    

            </title>  
    

          
    

            <!-- Internal CSS Style Sheet -->
    

            <style>  
    

                div {  
    

                    border-bottom-style: double;  
    

                }  
    

                h1 {  
    

                    color: green;  
    

                    text-align: center;  
    

                    border: 5px solid black;  
    

              
    

                    /* CSS Property | border-bottom-style */  
    

                    border-bottom-style: inherit;  
    

                }  
    

            </style>  
    

        </head>  
    

          
    

        <body>  
    

            <div> 
    

                  
    

                <!-- border-bottom-style: inherit; -->
    

                <h1>GeeksForGeeks</h1>  
    

            </div> 
    

        </body>  
    

    </html>                      
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 



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


    

  • Google Chrome 1.0
    • 

  • Internet Explorer 5.5
    • 

  • Firefox 1.0
    • 

  • Safari 1.0
    • 

  • Opera 9.2
    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Chandu_Siddartha
Check out this Author's contributed articles.
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.