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
Previous
CSS | isolation Property
Next

CSS | transition-duration Property
Recommended Articles
Page :
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-inline-start-style Property
26, Mar 20
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | transform-origin Property
24, Jul 19
How to use text overflow property in CSS ?
21, Apr 21
How to disable resizable property of textarea using CSS?
13, Nov 18
How content property is used with :after selector in CSS ?
15, Apr 21
CSS | hanging-punctuation Property
21, Jan 19
CSS font-family Property
24, Dec 18
CSS clip Property
27, Dec 18
CSS font-style Property
27, Dec 18
CSS text-decoration Property
28, Dec 18
CSS object-fit Property
31, Dec 18
CSS | line-height Property
31, Dec 18
CSS list-style Property
31, Dec 18
CSS border-style Property
31, Dec 18
CSS border-color Property
02, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Chandu_Siddartha
@Chandu_Siddartha
Vote for difficulty
Current difficulty :
Expert





Improved By :
Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!