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

 MapleTracker

– 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

 002_convertObjectToList1.js

– By hrprep


Happy switches DEMO

 Happy switches

– By kmck


HR Alert DEMO

 HR Alert

– By cobra_winfrey


005_convertArrayToObject3.js DEMO

 005_convertArrayToObject3.js

– 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.