Skip to content
Related Articles

Related Articles

CSS | border-bottom-style Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 01 Aug, 2022

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: 

html




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

html




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

html




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

html




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

html




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

html




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

html




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

html




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

html




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

html




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

html




<!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 and above
  • Edge 12.0 and above
  • Internet Explorer 5.5 and above
  • Firefox 1.0 and above
  • Opera 9.2 and above
  • Safari 1.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!