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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

    
    

    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

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.