20+ HTML CSS Divider <hr>

HTML CSS Divider – Are you looking for HTML CSS Divider, If yes then in this post I am going to share hand-picked HTML CSS Divider for you. It helps to divide content if they are not related if you are listing multiple content box then these fancy css Divider you can use to divide content easily and attractive way. You can use these HTML CSS Divider in your next web based projects.

HTML CSS Divider

Following are the list of HTML CSS Divider.

Animate Hr DEMO

  Animate Hr

Animate the hr , with the use of jQuery and Css3 – By Busuttil-Nicolas

Animated hr tags DEMO

  Animated hr tags

A simple CSS animation for an hr to give the impression of threads being woven on a loom. As implemented on http://loomweb.co.za. – By MariusW

hr line transitions DEMO

  hr line transitions

simple simple simple, but also nice – By dpchamps

Subtle Rainbow <hr> DEMO

  Subtle Rainbow <hr>

A rainbow tag that isn’t too intrusive. – By monstersaurous

Gradient <hr> DEMO

  Gradient <hr>

Example for http://stackoverflow.com/questions/31007356 – By seven-phases-max

The humble hr DEMO

  The humble hr

Extra features on hr hover – By mariosmaselli

CSS gradient zigzag hr DEMO

  CSS gradient zigzag hr

Turns the hr element into a zig zag pattern. Colors have to be chose by the user to match different parts. A sass mixin to simplify color transition is on the way! – By argo49

Style an <hr> tag DEMO

  Style an <hr> tag

– By korell

hr restyled with pseudo-element DEMO

  hr restyled with pseudo-element

how to set two balls and 1 pic with 2 pseudo-elements? answer: shadow the ball! – By gcyrillus

HR styling for forums DEMO

  HR styling for forums

http://css-tricks.com/forums/discussion/26718/how-to-make-two-horizontal-divider-lines-in-css – By kbrec85

fancy hr DEMO

  fancy hr

This is a fancy hr element done in pure css – By KyleDavidE

<hr> effect on menu hover DEMO

  <hr> effect on menu hover

I’ve used HTML tag <hr> to add nice effects on menu list elements on hover. – By taboo09

Fancy HR divider DEMO

  Fancy HR divider

Fancy HR elements with text/whatever centered – By oobleck

The humble hr DEMO

  The humble hr

not very humble that 100px line thogh – Heart ? Make sure to check out my other entry as well: http://codepen.io/awesomephant/details/nlCAh – By maxakohler

Pseudo-elements on a Horizontal Rule (<hr> element) DEMO

  Pseudo-elements on a Horizontal Rule (<hr> element)

– By SitePoint

Text Based HR (Horizontal Rule) DEMO

  Text Based HR (Horizontal Rule)

Everyone needs a horizontal rule, but sometimes it’s just next to have a little bit of text int here as well. – By kyleknighted

Fullwidth hr’s DEMO

  Fullwidth hr's

Let our overflow the parents container and stretch it to 100vw. – By Azragh

MapleTracker DEMO


– By AgroDesu

Faux Uploader DEMO

  Faux Uploader

Using <hr> to indicate the “progress” of the upload. – By DeptofJeffAyer

Stylish Divider DEMO

  Stylish Divider

Make your HR divider look cool – By rno1d

002_convertObjectToList1.js DEMO


– By hrprep

Happy switches DEMO

  Happy switches

– By kmck


  HR Alert

– By cobra_winfrey

005_convertArrayToObject3.js DEMO


– By hrprep

I Hope you liked Hand-picked list of HTML CSS Divider, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.