CSS border-bottom Property

❮ Prev Next ❯

The border-bottom property is a shorthand property for defining the width, style, and color of the bottom border. You can change places of the values. But the right order is when you set the width, the style and then the color of the border-bottom. If you don’t define the style of your border, the color will not work, because an element must have a border before you change the color of it.

If you don’t mention the width, it will automatically choose a medium size. If the color is not specified, it will understand the parent color, and if the style is not specified, it will not work.

Initial Value	medium none currentColor
Applies to	All elements.
Inherited	No.
Animatable	Yes. The color and the width of the border-bottom are animatable.
Version	CSS1
DOM Syntax	object.style.borderBottom = "15px dotted blue";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

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

Example of the border-bottom property:

<!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>

Try it Yourself »

Result

Example of using the border-bottom property with <h2>, <p> and <div> elements:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom: 5px dashed #1c87c9;
      }
      p {
        border-bottom: 8px double #8ebf42;
      }
      div {
        border-bottom: 10px ridge #ccc;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a dashed blue bottom border.</h2>
    <p>A paragraph with a double green bottom border.</p>
    <div>A div element with a ridge gray bottom border.</div>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description
border-bottom-style	Defines the style of the bottom border. Default value is "none".
border-bottom-width	Defines the width of the bottom border. Default value is "medium".
border-bottom-color	Defines the color of the bottom border. Default value is the color of the text.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.