CSS border-bottom property

CSS border-bottom property is used to specify bottom side border width, style, and color of a HTML Element.

CSS border-bottom property is a shorthand to specify border-bottom-width, border-bottom-style, and border-bottom-color as a single property.

The syntax to specify border-bottom is

border-bottom: border-bottom-width border-bottom-style border-bottom-color;

where

PropertyMandatory/OptionalExamples
border-bottom-widthOptional1px, 2em
border-bottom-styleMandatorysolid, dotted, double
border-bottom-colorOptional#555, red, #55fffcdd

Examples

ADVERTISEMENT

border-bottom: 5px solid red;

In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, border-bottom-style of solid, and border-bottom-color of red.

index.html

border-bottom: 5px solid;

In the following example, we set a border-bottom for <h1> element, with border-bottom-width of 5px, and border-bottom-style of solid. We do not specify any value for border-bottom-color.

index.html

border-bottom: solid;

In the following example, we set a border-bottom for <h1> element, with border-bottom-style of solid. We do not specify any width and color for the border-bottom.

index.html

div border-bottom

In the following example, we set a border-bottom for <div> element, with border-bottom of 2px solid #00F.

index.html

Conclusion

In this CSS Tutorial, we learned about border-bottom property, and how to use this property for HTML Elements, with examples.