CSS border-bottom Property

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";

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>

Result

CSS border-bottom Property

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>

Result

CSS border-bottom Property

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.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

What does the CSS 'border-bottom' property do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?