CSS border-bottom-style 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-style property in CSS specifies the style of the bottom border of an element.

This property allows you to control the appearance of the border, enhancing the design and visual hierarchy of your web pages. By choosing different border styles, you can create a variety of effects and improve the aesthetics of your site.

💡 Syntax

The syntax for the border-bottom-style property is simple and can be applied to any block-level or inline element that has a border. The property can take several predefined values to style the border.

Syntax

Copied

element {
  border-bottom-style: style;
}

Here, style can be one of the following values.

🎛️ Default Value

The default value of the border-bottom-style property is none, which means that no border will be displayed unless explicitly specified.

🏠 Property Values

Value	Description
none	No border is displayed.
solid	A single, solid line.
dotted	A series of dots.
dashed	A series of dashed lines.
double	Two solid lines with a space in between.
groove	A 3D grooved border that appears to be carved into the page.
ridge	A 3D ridged border that appears to be raised from the page.
inset	A 3D border that appears to be embedded into the page.
outset	A 3D border that appears to be coming out from the page.

📄 Example1: Basic Usage

In this example, we'll apply a solid bottom border to a paragraph.

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-style Example</title>
  <style>
    p {
      border-bottom-style: solid;
      border-bottom-width: 2px;
      border-bottom-color: #000;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Solid Bottom Border</h1>
  <p>This paragraph has a solid bottom border with a width of 2 pixels and a color of black.</p>
</body>
</html>

📄 Example 2: Different Styles

In this example, we'll apply different border styles to showcase the various options available.

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-style Example</title>
  <style>
    .border-examples div {
      border-bottom-width: 2px;
      padding: 10px;
      margin: 10px 0;
    }
    .solid {
      border-bottom-style: solid;
      border-bottom-color: #3498db;
    }
    .dotted {
      border-bottom-style: dotted;
      border-bottom-color: #e74c3c;
    }
    .dashed {
      border-bottom-style: dashed;
      border-bottom-color: #2ecc71;
    }
    .double {
      border-bottom-style: double;
      border-bottom-color: #f39c12;
    }
  </style>
</head>
<body>
  <h1>Different Border Bottom Styles</h1>
  <div class="border-examples">
    <div class="solid">Solid Border Bottom</div>
    <div class="dotted">Dotted Border Bottom</div>
    <div class="dashed">Dashed Border Bottom</div>
    <div class="double">Double Border Bottom</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom-style property is widely supported across modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a well-established property with consistent behavior across different platforms.

🎉 Conclusion

The border-bottom-style property provides a variety of options for styling the bottom border of an element, from simple lines to more complex effects. By experimenting with different styles, you can enhance the visual appeal and design of your website, creating a more engaging user experience.