CSS border-bottom Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-bottom property in CSS is used to define the bottom border of an element.

This property allows you to control the width, style, and color of the bottom border, enabling you to create visually distinct elements within your web design.

💡 Syntax

The border-bottom property is a shorthand for setting the border-bottom-width, border-bottom-style, and border-bottom-color properties all at once. The syntax can include one, two, or all three of these values.

Syntax

Copied

element {
  border-bottom: width style color;
}

🎛️ Default Value

The default value for the border-bottom property is:

Syntax

Copied

border-bottom: medium none color;

This means the border is not visible by default because the style is set to none.

🏠 Property Values

Value	Description
width	Specifies the thickness of the border (e.g., 1px, 2em, thin, thick).
style	Defines the style of the border (e.g., solid, dashed, dotted, double).
color	Sets the color of the border (e.g., #ff5733, blue, rgb(255, 87, 51)).

📄 Example

In this example, we'll add a solid, red bottom border with a thickness of 2px to a div element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-bottom Example</title>
  <style>
    div {
      border-bottom: 2px solid red;
    }
  </style>
</head>
<body>
  <h1>Border-Bottom Example</h1>
  <div>This is a div element with a bottom border.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom property is well-supported across all major browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a reliable property that works consistently across different platforms.

🎉 Conclusion

The border-bottom property is a versatile tool for adding emphasis to the bottom edge of elements. Whether you're creating a simple underline effect or designing a more complex layout, this property gives you the control to style the bottom border in a way that complements your overall design. Experiment with different widths, styles, and colors to see how border-bottom can enhance your web pages.