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

    
    

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

    
    

  • 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
  • Opera 9.2
  • Safari 1.0


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.