Speckyboy Design Magazine

8 Horizontal Rules and Dividers Enhanced with CSS

Some design elements are so common that they almost become afterthoughts. The horizontal rule is one of them. It’s easy to simply place them within our content without any attention to detail.

But this venerable HTML tag is capable of doing so much more – thanks to some clever CSS. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow.

If you’re looking to take your HR’s up to the next level, you’ll want to check out this collection of fanciful dividers that go beyond the default. Let’s dig in!

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

The Measure of an HR

This example is incredibly clever, if a bit on the extreme side. It features a large conglomerate of <hr> tags (100 in all) that are styled to simulate the look of a ruler. Practical? Maybe not. But it’s certainly creative.

See the Pen
A Horizontal rule-er by John W

Inline Lines

While this snippet doesn’t use an actual horizontal rule, it simulates the effect with CSS. Text or other design elements can be placed inline with the divider, making for an attention-grabbing effect. It’s also delightfully simple in terms of code.

See the Pen
Inline horizontal rule by Ohad

Iconic Shapes

Here’s proof that subtlety can still stand out. A standard horizontal rule is enhanced with shapes (circle, diamond, star, etc.) and provides for an attractive visual. Combined with the rule’s short width and bright color, it helps readers delineate one section of content from another.

See the Pen
Fancy Horizontal Rules by szpakoli

Accordion Rules

Accordions have become one of the more popular UI elements due to their penchant for being space savers. This pure CSS take on the feature includes horizontal rules as part of the usable interface. A rare instance of the good old <hr> being used for functional purposes.

See the Pen
Accordion Effect with Horizontal Rules by Will Boyd

Simple Style Variations

This snippet offers up 9 interesting horizontal rules that can fit a variety of styles and use cases. Examples include the usage of symbols, centered text, colors and border patterns. There’s something here for everyone.

See the Pen
Some HR Styles by Mark Murray

Medium Style with Accessibility

Placing text inside a horizontal rule can be tricky. It often involves techniques that aren’t very accessible. This snippet is different, as it utilizes content from <h2> tags. It not only offers a cool Medium-style aesthetic, but it’s friendly to screen readers as well.

See the Pen
Accessible Medium Style Dividers by Zoë Bijl

Decorative and Minimal Designs

Perhaps you’d like your dividers to look nice without distracting from the rest of your content. This collection of 18 simple styles is for you. The effects are well-executed without going over-the-top with flashy features.

See the Pen
18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari

Charlie Brown’s Shirt or Bart Simpson’s Hair?

When viewing this zig-zag pattern, one conjures up images of cartoon characters. But its also a clever bit of code. It’s a combination of two <hr> tags with angled CSS gradients. Now, which character does it best represent? Let’s go with Bart’s hair.

See the Pen
Zigzag Horizontal Rule by m0cha

(Horizontally) Divide and Conquer

Sure, the default styling of a horizontal rule gets the job done – but where’s the fun in that? Take a cue from the examples above and create something that compliments all of your great design work.

Need even more inspiration? Check out our CodePen collection for more divider snippets.

The post 8 Horizontal Rules and Dividers Enhanced with CSS appeared first on Speckyboy Design Magazine.

Recent Articles: