CSS border-bottom-width Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-bottom-width property in CSS allows you to specify the thickness of the bottom border of an element.

This property is part of the border shorthand properties and is used to control the width of the border along the bottom edge of an element. By adjusting this property, you can enhance the visual separation of elements and create a more defined layout.

💡 Syntax

The syntax for the border-bottom-width property is as follows:

Syntax

Copied

element {
  border-bottom-width: value;
}

Here, value can be any valid CSS length unit or the keyword medium.

🎛️ Default Value

The default value of the border-bottom-width property is medium, which typically corresponds to a width of 3 or 4 pixels, depending on the browser's default styling.

🏠 Property Values

Value	Description
length	Specifies the width of the bottom border using a length unit, such as px, em, rem, vw, etc. For example, 2px, 0.5em, or 1rem.
medium	The default border width, usually around 3 or 4 pixels.
thin	A thinner border width, typically less than medium.
thick	A thicker border width, usually more than medium.

📄 Example

In this example, we set the bottom border width of a paragraph to 5 pixels.

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-width Example</title>
  <style>
    p {
      border-bottom-width: 5px;
      border-bottom-style: solid; /* Ensure the border is visible */
      border-bottom-color: black; /* Set a color for visibility */
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Bottom Border Width</h1>
  <p>This paragraph has a bottom border width of 5 pixels.</p>
</body>
</html>

Example with Keywords

In this example, we use thin to make the bottom border of a heading thin.

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-width Example</title>
  <style>
    h2 {
      border-bottom-width: thin;
      border-bottom-style: dashed; /* Ensure the border is visible */
      border-bottom-color: blue; /* Set a color for visibility */
    }
  </style>
</head>
<body>
  <h1>Heading with Thin Bottom Border</h1>
  <h2>This heading has a thin bottom border.</h2>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom-width property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This makes it a reliable choice for styling elements in a consistent manner across different platforms.

🎉 Conclusion

The border-bottom-width property is a useful tool for controlling the thickness of the bottom border of elements.

Whether you want to add a subtle line or a prominent divider, adjusting the border width can help you achieve the desired visual effect. Experiment with different values to find the best fit for your design needs.