CSS border-bottom (Set/Change Bottom Border)

The CSS border-bottom property is used when we need to set the border to the bottom of an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border-bottom: 4px solid green;}
      p {border-bottom: 8px dotted coral;}
      div {border-bottom: 8px dashed chocolate;}
   </style>
</head>
<body>

   <h2>The border-bottom Property</h2>
   <p>This is para one.</p>
   <div>This is div one.</div>

</body>
</html>
Output

The border-bottom Property

This is para one.

This is div one.

The border-bottom is basically the shorthand of following three CSS properties:

  1. border-bottom-width
  2. border-bottom-style
  3. border-bottom-color

Therefore, in the following code:

p {border-bottom: 8px dotted coral;}

8px is the width, dotted is the style, and coral is the color, of bottom border.

Important - The default value of:

  • border-bottom-width is medium
  • border-bottom-style is none
  • border-bottom-color is the color of text

That is, if we omit any value to the border-bottom property, then the default value will get automatically acquired.

CSS border-bottom Syntax

The syntax to apply border-bottom property to an element, is:

border-bottom: width style color|initial|inherit;

The third value, may be one of the following three:

  • color - to apply required color
  • initial - applies the default color value
  • inherit - applies the color of its parent element

CSS Online Test


« Previous Tutorial Next Tutorial »