CSS | border-bottom-style Property

Difficulty Level : Expert
Last Updated : 06 Jul, 2020

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:

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

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:

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

Output:

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

Syntax:
```
border-bottom-style: dotted;
```

Example:

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

Output:

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

Syntax:
```
border-bottom-style: dashed;
```

Example:

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

Output:

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

Syntax:
```
border-bottom-style: solid;
```

Example:

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

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:

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

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:

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

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:

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

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:

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

Output:

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

Syntax:
```
border-bottom-style: initial;
```

Example:

<!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: initial;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:initial; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                      

Output:

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

Syntax:
```
border-bottom-style: inherit;
```

Example:

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

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

Related Articles