Aquileo | CSS border-bottom-width Property

The border-bottom-width property in CSS is used to specify the width (thickness) of the bottom border of an element. It controls how thick or thin the bottom border appears.

It accepts values like thin, medium, thick, or specific units such as px, em, etc.
The border is visible only when a border style is defined (e.g., solid, dashed).
It is commonly used with border-bottom-style and border-bottom-color for complete border styling.

Syntax:

border-bottom-width: length | thin | medium | thick | initial | inherit;

Property Values: The border-bottom-width property values are listed below:

Value	Description
thin	Sets a thin border width.
medium	Sets a medium border width (default).
thick	Sets a thick border width.
length	Sets the border width using a specific length value. Does not accept negative values.

Example: Here, we demonstrates the border-bottom-width property using different values (thin, medium, thick, and 20px). Each styled <div> shows a solid green bottom border with specified widths, illustrating how each value affects border thickness.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        border-bottom-width property
    </title>

<!--Driver Code Ends-->

    <style>
        #thin {
            border-color: green;
            border-bottom-style: solid;
            border-bottom-width: thin;
        }

        #medium {
            border-color: green;
            border-bottom-style: solid;
            border-bottom-width: medium;
        }

        #thick {
            border-color: green;
            border-bottom-style: solid;
            border-bottom-width: thick;
        }

        #length {
            border-color: green;
            border-bottom-style: solid;
            border-bottom-width: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="text-align:center">

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>border-bottom-width property</h3>

    <div id="thin">
        border-bottom-width: thin;
    </div><br><br>

    <div id="medium">
        border-bottom-width: medium;
    </div><br><br>

    <div id="thick">
        border-bottom-width: thick;
    </div><br><br>

    <div id="length">
        border-bottom-width: length;
    </div>
</body>

</html>

<!--Driver Code Ends-->

CSS border-bottom-width Property

Explore