CSS border-bottom

The border-bottom property in CSS is a shorthand property for setting the width, style, and color of an element’s bottom border. This property allows you to control all three aspects of the bottom border in a single declaration.

Syntax of border-bottom

</>
Copy
border-bottom: border-width border-style border-color | initial | inherit;

Values

ValueDescription
border-widthSpecifies the width of the bottom border. Accepts values like thin, medium, thick, or any valid CSS length unit (e.g., 2px, 0.1em).
border-styleDefines the style of the bottom border. Accepts values like none, solid, dashed, dotted, etc.
border-colorSpecifies the color of the bottom border. Accepts any valid CSS color value (e.g., red, #ff0000, rgba(255,0,0,0.5)).
initialSets the property to its default value (medium none currentColor).
inheritInherits the value from its parent element.

Default Value

medium none currentColor

Examples for border-bottom

Using the CSS border-bottom Property

The following examples demonstrate how to use the border-bottom property to style the bottom border of an element.

</>
Copy
/* Set the bottom border with width, style, and color */
.element {
  border-bottom: 3px solid red;
}

/* Set only the style and color */
.element {
  border-bottom: dashed blue;
}

/* Set the bottom border width only */
.element {
  border-bottom: 5px;
}

/* Use the initial value */
.element {
  border-bottom: initial;
}

/* Inherit the bottom border properties from the parent */
.element {
  border-bottom: inherit;
}

Example for Solid Bottom Border

Below is an example demonstrating how to use border-bottom: 4px solid #4CAF50; to apply a solid green border to the bottom of an element:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    padding: 20px;
    border-bottom: 4px solid #4CAF50;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for Red Dashed Bottom Border

border-bottom: 10px dashed red;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    padding: 20px;
    border-bottom: 10px dashed red;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for Blue Dotted Bottom Border

border-bottom: 4px dotted rgba(0, 0, 255, 1.0);

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    padding: 20px;
    border-bottom: 4px dotted rgba(0, 0, 255, 1.0);
}
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-bottom property is supported in all major browsers. Below is a compatibility table:

BrowserVersion
Chrome1.0
Edge4.0
Firefox1.0
Safari1.0
Opera3.5