CSS | border-bottom-style Property

The border-bottom-style property in CSS is used to set the style of the 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 an embedded line segment, which makes 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
    • 

  • Opera 9.2
    • 

  • Safari 1.0
    • 




          
          
          
          

            

    

        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.