Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 26 Mar, 2021

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:

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:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :