Collection of free HTML and CSS divider code examples from Codepen, GitHub, and other resources: vertical, horizontal, etc. Update of February 2021 collection. 5 new items.

Related Articles

  1. HTML <hr> with CSS
  2. CSS Headers and Footers
  3. CSS Timelines
Demo image: Pure CSS Angled Sections

Author

  • Ana Tudor

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Angled Sections

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

Responsive: yes

Dependencies: -

Demo image: Border Between List Items

Author

  • Joshua Comeau

Links

Made with

  • HTML / CSS

About a code

Border Between List Items

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

Responsive: no

Dependencies: -

Demo image: Fancy Title Divider with One Element

Author

  • Temani Afif

Links

Made with

  • HTML / CSS

About a code

Fancy Title Divider with One Element

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

Responsive: no

Dependencies: -

Demo image: Creating a Pac-Man Themed Divider

Author

  • Chris Bongers

Links

Made with

  • HTML / CSS

About a code

Creating a Pac-Man Themed Divider

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

Responsive: yes

Dependencies: -

Demo image: Horizontal Dividers

Author

  • Nikki Peel

Links

Made with

  • HTML / CSS

About a code

Horizontal Dividers

Different methods for dividing content horizontally. Section 1: colors fade out. Section 3: uses transform:skew to slant section. Section 4: SVG chevron pattern footer (uses clip-path to create wavy top).

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

Responsive: yes

Dependencies: -

Demo image: Fancy Divider

Author

  • Anthony Law Liddle

Links

Made with

  • HTML / CSS (SCSS)

About a code

Fancy Divider

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

Responsive: yes

Dependencies: -

Demo image: SVG Section Divider

Author

  • CodyHouse

Links

Made with

  • HTML / CSS (SCSS)

About a code

SVG Section Divider

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

Responsive: yes

Dependencies: -

Author

  • rinaw

Links

Made with

  • HTML (Slim) / CSS (SCSS)

About the code

SVG Section Dividers

SVG section dividers, embedded with data-uri & colored with SASS.

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

Responsive: yes

Dependencies: bootstrap.css

Author

  • Adam Quinlan

Links

Made with

  • HTML / CSS

About the code

Slanted Sections

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

Responsive: yes

Dependencies: -

Author

  • CMDW

Links

Made with

  • HTML / CSS

About the code

Waves Content Divider

Waves content divider using CSS.

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

Responsive: yes

Dependencies: -

Demo image: SVG Page Separator

Author

  • Alexandr Kazakov

Links

Made with

  • HTML / CSS (SCSS)

About the code

SVG Page Separator

Simple page separator with SVG.

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

Dependencies: -

Demo image: Row Separator Row Separator - GIF Demo

Author

  • Emanuele

Links

Made with

  • HTML / CSS

About the code

Row Separator

Row Separator - collection of divider styles.

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

Dependencies: -

Demo image: Responsive Scalloped Page Dividers

Author

  • chilli con code

Links

Made with

  • HTML / CSS

About the code

Responsive Scalloped Page Dividers

Responsive scalloped page dividers using CSS gradients.

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

Dependencies: -

Demo image: Responsive Skewed Page Dividers

Author

  • chilli con code

Links

Made with

  • HTML / CSS

About the code

Responsive Skewed Page Dividers

Responsive skewed page dividers using CSS gradients only.

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

Dependencies: -

Demo image: Rainbowy Dashed Divider Rainbowy Dashed Divider - GIF Demo

Author

  • Simon Goellner

Links

Made with

  • HTML / CSS (SCSS)

About the code

Rainbowy Dashed Divider

Pretty CSS rainbowy dashed divider.

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

Dependencies: -

Demo image: A Collection of Separator Styles A Collection of Separator Styles - GIF Demo

Author

  • Mary Lou

Links

Made with

  • HTML / CSS

About the code

A Collection of Separator Styles

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.

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

Dependencies: -