CSS border-bottom Property

The border-bottom property is a shorthand property with the help of which the width, style, and color of the bottom border can be defined. 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

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

Let’s see another example where we added a border bottom to <h2>, <p> and <div> elements.

Example

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

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

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

If the color of border is not mentioned,




Related articles