CSS border-bottom Property Tutorial

In this section, we will learn what the border-bottom property is and how to use it in CSS.

CSS border-bottom Property Definition and Usage

The border-bottom property is a shorthand property that focuses on the bottom border of an element and allows us to change the “width”, “style”, and “color” property of this border all at one declaration.

Here’s the order from which we set values for the `border-bottom` property:

CSS border-bottom Property Syntax

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

CSS border-bottom Property Value

As the syntax of this property shows, the border-bottom property takes three values:

  • The first value is the one we set for the border-width property.
  • The second value is the one we set for the border-style property.
  • And the last value is the one we set for the border-color property.

Note: We can use the two global values “initial” and “inherit” here as well.

Example: border-bottom property in CSS

See the Pen border-bottom property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-bottom Property Work?

The border-bottom property is a way of styling the bottom border of an element. This means the other border sides won’t take effect from this property.

Leave a Reply