10+ HTML <hr> Examples
The horizontal rule <hr> is no longer just a separator! This collection demonstrates how to completely reimagine its design using a CSS reset and pseudo-elements (::before, ::after): from gradient strips and 3D effects to dividers with integrated text or icons. Learn how to leverage properties like content, box-shadow, and transform to turn a semantically clean element into a complex UI component.
Examples
HR Department
A unique approach focusing on styling any block elements instead of just <hr>, using border-image to maintain semantic purity. Includes specialized JS polyfills to fix radial-gradient syntax and correctly escape SVG data URI, ensuring maximum compatibility.
See the Pen HR Department.
Simple Styles for Horizontal Rules
An extensive set of styles utilizing border-top with various line types (dashed, dotted, double) and clever tricks with box-shadow: inset to create an indented line effect. It demonstrates how to achieve complex visual variety by manipulating only basic border properties.
See the Pen Simple Styles for Horizontal Rules.
Explore how a semantically simple element <hr> is completely repurposed into a complex animated component without using JavaScript. Detailed @keyframes allow control over every “pixel” of the scanner animation, successfully creating a retro-futuristic gadget effect.
