How to set the width of the bottom border in CSS ?

Last Updated : 16 May, 2023

In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin…etc.

Approach 1:

We will use inline CSS inside the tags.
We will use border-color, border-style property to define the border clearly.
We can give the width of the bottom border using the border-bottom-width property.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Width Bottom Border CSS</title>
</head>
<body>
    <h1 style="border-color : red ;
             border-style : solid ;
             border-bottom-width : 100px ;">
        GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE
      </h1>
</body>
</html>

Output:

border-bottom-width

Approach 2:

We used CSS inside the style tag which is also known as Internal CSS.
We can give the width of the bottom border using the border-bottom-width in pixels and predefined values like thin, thick etc.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Width Bottom Border CSS</title>
    <style>
        h1 {
            border-color: green;
            border-style: solid;
            border-bottom-width: 70px;
        }
 
        h2 {
            border-color: rgb(224, 238, 23);
            border-style: solid;
            border-bottom-width: thin;
        }
 
        h3 {
            border-color: rgb(23, 123, 238);
            border-style: solid;
            border-bottom-width: thick;
        }
    </style>
</head>
 
<body>
    <h1>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h1>
    <h2>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h2>
    <h3>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h3>
</body>
</html>