Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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>


Output:

border-bottom-width thick



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