CSS border-bottom Property

CSS border-bottom property specifies the element’s bottom border. It sets the width, style, and color of the bottom border in a single declaration.

This paragraph has a blue color bottom border.

The border-bottom property is a shorthand of the following three properties:

Example:

h1{
  border-bottom: 5px solid red;
}
h2{
  border-bottom: 5px dashed blue;
}
p{
  border-bottom: dotted; /* pass only required value */
}

If the border color is not specified, it will be same as element’s text color. See the example below:

Example:

h1{
  color: red; 
  border-bottom: solid; /* border color not specified */
}
h2{
  color: green;   
  border-bottom: dashed; /* border color not specified */
}

CSS Syntax

The border-bottom property has the following syntax:

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

Property Values

The border-bottom property accepts the following values:

border-bottom-widthSpecifies the width of the bottom border. Default value is medium.
border-bottom-styleSpecifies the style of the bottom border like ‘solid’, ‘dashed’, etc. Default value is solid.
border-bottom-colorSpecifies the color of the bottom border. Default value is the current color of the element.
initialSets the border-bottom property to its default value. Which is none.
inheritInherits the border-bottom property from the element’s parent.
noneThis is the default value. It removes any existing bottom border(On setting border-bottom to none means setting border-bottom-style to none).

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderBottom = “5px solid red”

Related Pages

CSS Tutorial: CSS Borders