CSS | border-bottom-style Property - GeeksforGeeks

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;
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>                     
<!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;
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>                      
<!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;
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>                     
<!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;
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>                     
<!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;
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>                     
<!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;
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>                     
<!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;
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>                                 
<!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;
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>                                 
<!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;
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>                                 
<!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;
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>                     
<!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;
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>                     
<!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
nidhi_biet
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?