How can I change the thickness of my `` tag

html

responsive-design

css

pseudo-elements

byAnton Shumikhin·Sep 13, 2024

Upgrade your <hr> tag's thickness by modifying the CSS height property:

<hr style="height: 4px; border: none;">

Or go classy with consistent site-wide thickness through a dedicated CSS class:

.hr-thick { height: 4px; border: none; }

<hr class="hr-thick">

This strategy effectively bypasses any default borders, promising clean, personalized thickness that's easy to control.

The CSS approach: Making `<hr>` input obedient

Want to compel your <hr> tag to dress stylishly? Control it with CSS. Here's the comprehensive guide:

Mastering cross-browser uniformity

Ensure a standard look across different browsers and keep sub-pixel rendering issues at bay with this robust strategy:

/* Cross-browser compatible <hr> style */
hr {
  height: 0; /* Because less is more */
  border: none; /* Naked HR, not NSFW though */
  border-top: 5px solid #333; /* Dressing up, finally! */
}

Crafting styles with invisible hands

Use opacity and color to create the perfect optical illusion of boldness or subtleness. It's like a magic trick, only less fun, but more useful:

/* Thin-line illusion with opactiy and color */
hr.fine-line {
  border-top: 1px solid rgba(0, 0, 0, 0.3); /* Like the hairline of a software engineer */
}

Cleaning up the deprecated gig

Say goodbye to old HTML attributes like size and noshade. They're like your ex, outdated and not worth hanging on to.

Sequencing styles for maintainability

Keep your <hr> styles in an external CSS file for cleaner, organized, and maintainable code base. It's your HR wardrobe, treat it well.

Mastering `<hr>` variations: The Ultimate Guide

Let's delve into advanced tag style diversity for that unmatched <hr> look.

Dynamically class-fying thickness

Use classes for different thicknesses to make your code modular. Treat them as your go-to <hr> style wardrobe:

/* Predefined thickness classes */
.hr-thin { border-top: 1px solid #666; } /* It's called fashion, darling! */
.hr-medium { border-top: 2px solid #666; }
.hr-thick { border-top: 5px solid #666; } /* Bolder than your coffee */

Responsiveness for all occasions

Media queries handle the <hr> tag appearance, ensuring it adapts to any screen size:

/* HR styles for different screen sizes */
@media (max-width: 600px) {
  hr { border-top: 2px solid #333; } /* Mobile HR, compact and cute */
}
@media (min-width: 601px) {
  hr { border-top: 5px solid #333; } /* Desktop HR, thick and trusty */
}

CSS-ifying with pseudo-elements

For those dazzling <hr> styles, like double-line or inset shadow, get a grip on pseudo-elements:

/* Double-line HR with CSS pseudo-elements */
hr.double-line {
  height: 0; /* Size zero, ready for some makeup */
  border: none; /* Undressed HR, waiting for styles */
  border-top: 1px solid #8c8c8c; /* That's more like it! */
  position: relative; /* Ready to forge some relations */
}
hr.double-line:after {
  content: ""; /* Prepping up space */
  display: block; /* Ready for showtime */
  height: 1px; /* Line broadcasting, in progress */
  background: #fff;
  position: absolute; /* Ready to style */
  top: 2px; left: 0; right: 0; 
}