Styling Horizontal Rules (HRs) in HTML

Beautiful CSS-Styled HTML HR with Code
Beautiful CSS-Styled HTML HR with Code

While the large things (colors, images, content, etc.) contribute to the “look” of your site, it’s the small things that make your site “feel” the way you want. When you’re looking at enhancing the “feel” of your site it’s often good to default styles applied by the users’ browser as much as possible. One place this can be done is with the HR element. Most websites use the horizontal rule in one way another as a way to easily divide content on the site. However, while it’s easy to change the color by setting the CSS “border-color” property, this leaves the same square, blocky look as the default HR. However, with widespread adoption of modern CSS properties, we can now use the “background-image” property to effectively modify the appearance of HRs, while allowing for excellent backwards-compatibility. To that end, I’ve discovered the “Simple Styles for <hr>’s” document at css-tricks.com to be very handy. These styles are beautiful, simple, and useful.

Leave a Reply