Customizing the Header Divider

This is a comprehensive reference guide on how to modify, style, or remove the line separating the site header from the main content.

The File

All header styling is controlled in your style.css file. Open it and look for the header block near the top:

/* Header layout with Flexbox */
header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #555; /* <-- The divider line */
}

The Anatomy of a Border

The border-bottom rule is actually a shorthand that combines three distinct properties: width, style, and color. You have a massive toolkit available for each.

1. Border Style

You are currently using dashed, but CSS supports several styles:

• solid: A standard, continuous line.
• dashed: Short line segments.
• dotted: A sequence of dots.
• double: Draws two parallel solid lines. (Note: You need a thickness of at least 3px to see the gap between them).
• groove: Makes the line look carved into the background.
• ridge: Makes the line look raised off the page (the opposite of groove).
• inset & outset: Creates a two-tone 3D shadow effect.
• none or hidden: Completely removes the border.

2. Border Thickness (Width)

You are not restricted to just pixels (px):

• Pixels (px): The standard. e.g., 1px, 2px, 5px.
• Keywords: thin, medium, or thick.
• Relative Units (em, rem): e.g., 0.1rem. This scales the thickness of the line based on the user's font size settings rather than screen pixels.

3. Border Color

You can define colors in several formats to match your terminal aesthetic:

• Hex Codes: Your current #555 or matching your blue links with #8ab4f8.
• RGBA (Transparency): Using rgba(red, green, blue, opacity) is fantastic for dark themes. For example, rgba(255, 255, 255, 0.2) gives you a white line at 20% opacity. This lets your #2b2b2b background bleed through, creating a perfectly blended, subtle divider.
• Named Colors: e.g., red, transparent.

Drop-in Examples

Here are a few configurations you can copy and paste directly into your CSS to test out different aesthetics.

The Bold Solid Line:

border-bottom: 2px solid #8ab4f8;

The Retro Double Line:

border-bottom: 4px double #555;

The Stealth/Transparent Line:

border-bottom: 1px solid rgba(255, 255, 255, 0.15);

How to Remove It

If you decide you prefer a cleaner look without the line at all, simply delete the entire border-bottom rule from the CSS block.