CSS Template to Add Border Below Heading

📝 Usage

This template demonstrates how to use the border-bottom property in CSS to add a border line below a heading.

📘 Explanation

The CSS code above uses the border-bottom property to add a line below the h1 element. You can adjust the color and thickness as needed.

🔹 Partial Code

Heading

<h1>Heading</h1>

<style>
  h1 {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }
</style>

💻 Full HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adding Border-Line Below Heading with border-bottom</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    h1 {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>This template demonstrates how to use the <code>border-bottom</code> property in CSS to add a border line below a heading.</p>
</body>
</html>

💻 Full Working Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adding Border-Line Below Heading with border-bottom</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    h1 {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>This template demonstrates how to use the <code>border-bottom</code> property in CSS to add a border line below a heading.</p>
</body>
</html>

Copied!

🎨 Practical Techniques for Heading Design

Using border-bottom to decorate headings is an effective way to visually separate sections while achieving a clean and refined design. Proper line styling clearly represents the content hierarchy.

🌈 Design Variations

In addition to the basic solid line, you can use dotted or dashed for dotted or dashed lines, and double for a double line effect. Instead of #000 (black), consider adjusting the color to match your site’s theme, such as #3498db (blue) or #e74c3c (red).

📏 Optimal Sizing

Typical line thickness ranges from 1px to 3px, and you can use padding-bottom to adjust the space between the text and the line. Setting different thicknesses for each heading level (h1 to h6) can help make the content structure more distinct—e.g., h1 at 3px, h2 at 2px, and so on.

✨ Advanced Styling Techniques

With linear-gradient(), you can create gradient lines, and combining box-shadow can add a 3D effect. Adding decorations with pseudo-elements like ::after allows for more original and creative designs.

Heading line styles serve as important visual guides, but excessive decoration can hinder readability. Use consistent styling across the site and apply more pronounced effects only to key sections.