How to use border-bottom Property in CSS?

Some Border-bottom property in below which is usually uses in CSS-

  • 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>
Tagged : / / / / / /