Open In App
Related Articles

CSS border-bottom-style Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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 the bottom border zero. Hence, it is not visible.
  • hidden: It is used to make the bottom border invisible. It is similar to none value except in the case of border conflict resolution of table elements.
  • dotted: It makes the bottom border with a series of dots.
  • short-line: It makes the bottom border with a series of short-line segments.
  • solid: It is used to make the bottom border with a single solid line segment.
  • double: It makes the bottom border to double a solid line. In this case, the border width is equal to the sum of the widths of the two-line segments and the space between them.
  • groove: It makes the bottom border with a grooved line segment, which makes feel that it is going inside.
  • inset: It makes the bottom border with an embedded line segment, which makes feel that it is fixed deeply on the screen.
  • outset: It is the opposite of inset. It makes the bottom border with a line segment, which appears to be coming out.
  • initial: It sets the border-bottom-style property to its default value.
  • inherit: The border-bottom-style property to be inherited from its parent element.

Example:  In this example, we are using border-style; none; property.

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:

Example: In this example, we are using border-style: hidden; property.

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:

Example: In this example, we are using border-style: dotted; property.

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:

Example: In this example, we are using border-style: dashed; property.

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:

Example: In this example, we are using border-style: solid; property.

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:

Example: In this example, we are using border-style: double; property.

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:

Example: In this example, we are using border-style: groove; property.

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:

Example: In this example, we are using border-style: inset; property.

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:

Example: In this example, we are using border-style: outset; property.

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:

Example: In this example, we are using border-style: initial; property.

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:

Example: In this example, we are using border-style: inherit; property.

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


Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads