Post thumbnail: 11 HTML <hr> with CSS

11 HTML <hr> with CSS

Collection of free HTML and CSS <hr> code examples.

Related Articles

  1. CSS Dividers
  2. CSS Timelines

Demo image: Animated hr Animated hr - GIF Demo

Author

  • @Grienauer

Made with

  • HTML / CSS (SCSS)

About the code

Animated <hr>

Animated hr (element BAM + modifiers).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Fullwidth hr

Author

  • Azragh

Made with

  • HTML / CSS (SCSS)

About the code

Fullwidth <hr>

Overflow the parents container and stretch it to 100vw.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: HR with CSS

Author

  • Gabriele Romanato

Made with

  • HTML / CSS

About the code

HR with CSS

HR with CSS generated content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: <hr>

Author

  • Dylan Sheffer

Made with

  • HTML / CSS

About the code

<hr>

Atlas themed horizontal line (hr).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: HTML <hr> tags

Author

  • Delonn

Made with

  • HTML / CSS

About the code

HTML <hr> tags

HTML <hr> with custom CSS.

Compatible browsers: Chrome (partially), Edge (partially), Firefox, Opera (partially), Safari (partially)

Dependencies: font-awesome.css

Demo image: HR with Centered Text

Author

  • Scott Zirkel

Made with

  • HTML / CSS (SCSS)

About the code

HR with Centered Text

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Some HR Styles

Author

  • Mark Murray

Made with

  • HTML / CSS (SCSS)

About the code

Some HR Styles

Messing around with some horizontal rule styles.

Compatible browsers: Firefox

Dependencies: -

Demo image: Humble <hr> Humble <hr> - GIF Demo

Author

  • Jake Albaugh

Made with

  • HTML / CSS / JavaScript

About the code

Humble <hr>

A very simple and subtle approach to <hr>s with an .activated state. Added label siblings to show additional information.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: HTML <hr>

Author

  • Hornebom

Made with

  • HTML / CSS

About the code

HTML <hr>

Nice combination of <hr> style and content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple Styles for Horizontal Rules

Author

  • Ibrahim Jabbari

Made with

  • HTML / CSS

About the code

Simple Styles for Horizontal Rules

18 Simple Styles for horizontal rules (<hr> CSS design).

Compatible browsers: Chrome (partially), Edge (partially), Firefox, Opera (partially), Safari (partially)

Dependencies: -

Demo image: HR Department

Author

  • Joey Hoer

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

HR Department

List of stylized horizontal rules.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top