• border-bottom-style
• border-bottom-width
• border-bottom-color
• border-bottom

border-bottom-style–

• none – This is default which specifies no border.
• hidden – This is very similar to none value, except in border conflict resolution for table elements
• solid – It specifies a solid border
• dotted – It specifies a dotted border
• double – It specifies a double border
• dashed – It specifies a dashed border
• groove – It specifies a 3D grooved border.
• ridge – It specifies a 3D ridged border.
• inset – It specifies a 3D inset border.
• outset – It specifies a 3D outset border

border-bottom-width–

• medium – This is default value which specifies a medium bottom border.
• thin – It specifies a thin bottom border
• thick – It specifies a thick bottom border
• length – We can define bottom border length in the form of % px etc.

border-bottom-color–

• color value
• transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: solid;
        border-bottom-color: #1c87c9;
        border-bottom-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2> A heading with a solid blue bottom border</h2>
  </body>
</html>

border-bottom–

Syntax:-

selector{ border-bottom: border-bottom-width border-bottom-style border-bottom-color;}

Ex:-

h2{ border-bottom: 10px solid #1c87c9;}

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom: 8px groove #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a groove blue bottom border.</h2>
  </body>
</html>

The post How to use border-bottom Property in CSS? appeared first on scmGalaxy.