30+ HTML <hr> with CSS - Free Code + Demos
Collection of 30+ HTML <hr> with CSS. All items are 100% free and open-source.
1. Animated Hr Element BAM + Modifiers
Author: @Grienauer (Grienauer)
Links: Source Code / Demo
Created on: August 23, 2018
Made with: HTML, SCSS
2. Fullwidth Hr's
Let our overflow the parents container and stretch it to 100vw.
Author: Azragh (Azragh)
Links: Source Code / Demo
Created on: March 9, 2018
Made with: HTML, SCSS
3. CSS: Hr With Generated Content
Author: Gabriele Romanato (gabrieleromanato)
Links: Source Code / Demo
Created on: April 30, 2017
Made with: HTML, CSS
4. <hr> With Custom Css
Author: Delonn (delonnkoh)
Links: Source Code / Demo
Created on: March 31, 2017
Made with: HTML, CSS
5. HR With Centered Text
Trying to keep my markup as clean as possible, I created this little dynamic HR tag that still pulls the content from the HTML, but gives it a bit more style. It also fails gracefully to a standard HR tag. I would think this works in IE, but I don't have any Windows machines to try it on...Read More
Author: Scott Zirkel (scottzirkel)
Links: Source Code / Demo
Created on: July 20, 2015
Made with: HTML, SCSS
Tags: html, css, hr, typography, semantic
6. Some HR Styles
Messing around with some Horizontal Rule styles.
Author: Mark Murray (markmurray)
Links: Source Code / Demo
Created on: November 27, 2014
Made with: HTML, SCSS
Tags: hr, style, horizontal, rule
7. The Humble <hr>
Just for fun late entry for the Pattern Rodeo #10. Mostly because I didn't have time last week, and I didn't see any other solutions like this...
Author: Shawn Beatty (sbeatty)
Links: Source Code / Demo
Created on: March 29, 2014
Made with: HTML, CSS
Tags: rodeo-010, hr, gradient, rodeo
8. The Humble <hr>
Just for fun late entry for the Pattern Rodeo #10. Mostly because I didn't have time last week, and I didn't see any other solutions like this...
Author: Shawn Beatty (sbeatty)
Links: Source Code / Demo
Created on: March 29, 2014
Made with: HTML, CSS
Tags: rodeo-010, hr, gradient, rodeo
9. <hr> Rodeo-010
Author: Hornebom (Hornebom)
Links: Source Code / Demo
Created on: March 16, 2014
Made with: HTML, CSS
Tags: rodeo-010
10. My Summer Vacation
Author: Amanda (amandadorrell)
Links: Source Code / Demo
Created on: March 15, 2014
Made with: HTML, CSS
Tags: rodeo-010
11. Knight Rider <hr>
Single element hr with kitt and karr light bar effect.
Author: James Delibas (jdelibas)
Links: Source Code / Demo
Created on: March 15, 2014
Made with: HTML, CSS, JS
Tags: rodeo-010, kitt, karr, knight-rider
12. The Humble <hr>
Having a shot at spicing up the humble hr as a part of the rodeo contest. Uses css counters. Base-64, CSS3 animations Pretty cheesy at the moment but this is more to demonstrate what you can do without compromising semantics and using only a single element to do quite a lot.
Author: Pali Madra (palimadra)
Links: Source Code / Demo
Created on: March 15, 2014
Made with: HTML, SCSS
Tags: rodeo-010, hr, animation, css-counters, base-64
13. Subtle Hr
Just a pair of consummate V's
Author: Jonathan Freeman (freethejazz)
Links: Source Code / Demo
Created on: March 14, 2014
Made with: HTML, CSS
Tags: rodeo-010
14. A Bit Of Elegance
Some attention to detail, an exercise in minimalism for season three of The CodePen Pattern Rodeo. The
element is used to add some finesse to a responsive and beautifully typeset article. Added functionality on hover of the hr similar to that of Kudos. Unfortunately, the JS library ...Read More
Author: Bilal Ayub (hackthevoid)
Links: Source Code / Demo
Created on: March 14, 2014
Made with: Haml, SCSS, CoffeeScript
CSS Pre-processor: SCSS
JS Pre-processor: CoffeeScript
HTML Pre-processor: Haml
Tags: rodeo-010, typography, responsive, horizontal-rule, hr
15. HR Department
An ever-growing list of stylized horizontal rules.
Author: Joey Hoer (joeyhoer)
Links: Source Code / Demo
Created on: October 25, 2012
Made with: HTML, SCSS, JS
Tags: hr, css3, svg, gradient
16. Neon <hr>
Entry for rodeo-010 contest, a red neon-looking styled horizontal rule
Author: Mario Durántez (warbelt)
Links: Source Code / Demo
Created on: March 14, 2014
Made with: HTML, CSS
Tags: rodeo-010, css, hr, horizontal-rule
17. Style Hr Tag With CSS
Author: Venom (Venom)
Links: Source Code / Demo
Created on: December 30, 2015
Made with: HTML, CSS
18. The Humble <hr>
Entry for Pattern Rodeo – Season 3, Week Two: March 14 - 21, 2014 – “The Humble
” Subtle and refined this time.
Author: Bram de Haan (atelierbram)
Links: Source Code / Demo
Created on: March 14, 2014
Made with: HTML, CSS
Tags: rodeo-010, hr, eighties, 80’s, ska
19. Loading "hr" Element CSS
Author: Marta Sobstyl (martasobstyl)
Links: Source Code / Demo
Created on: September 12, 2016
Made with: HTML, Sass, JS
20. <hr> Becomes Progress Bar On Hover
Hovering over the hr element shows information on how far you are in the article and estimates how much time it will take to finish.
Author: Travis (trhino)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
21. Hr Dots
a way to display a stylized, 3-dot page separator instead of a typical straight line
Author: Andrew Mowe (andrewmowe)
Links: Source Code / Demo
Created on: September 6, 2016
Made with: HTML, SCSS
Tags: horizontal-rule
22. Animations Playground Space
Author: Stephen S. (sparlos)
Links: Source Code / Demo
Created on: December 1, 2017
Made with: HTML, CSS, JS
23. Summer, Vacation, Hr & Css Ligatures
The Pattern Rodeo: hr, fonts & Css ligatures
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: March 16, 2014
Made with: HTML, CSS
Tags: rodeo-010
24. Replacement For Normal <hr> Tag
Can be used in place of tag , More color can be added by just adding more boxes
Author: sanjeev yadav (alexakasanjeev)
Links: Source Code / Demo
Created on: June 27, 2015
Made with: HTML, SCSS
Tags: html, css, effect, line-break, hover-effect
25. Animate Hr
Animate the hr , with the use of jQuery and Css3
Author: Busuttil Nicolas (Busuttil-Nicolas)
Links: Source Code / Demo
Created on: February 14, 2015
Made with: HTML, CSS, JS
Tags: html5, css3, jquery
26. Fancy Hr
This is a fancy hr element done in pure css
Author: Kyle Ehrlich (KyleDavidE)
Links: Source Code / Demo
Created on: March 20, 2014
Made with: HTML, CSS
Tags: rodeo-010
27. Animated Hr Element BAM + Modifiers
Author: @Grienauer (Grienauer)
Links: Source Code / Demo
Created on: August 23, 2018
Made with: HTML, SCSS
More Awesome Lists:
Share: