Collection of free HTML and CSS divider code examples: vertical, horizontal, etc. Update of May 2019 collection. 2 new items.

Table of Contents

  1. Horizontal Dividers
  2. Vertical Dividers

Related Articles

  1. HTML <hr> with CSS
  2. CSS Headers and Footers
  3. CSS Timelines

Horizontal Dividers

HTML and CSS horizontal divider code examples (11 items).

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: -

Vertical Dividers

HTML and CSS vertical divider code examples (1 items).

Demo image: Vertical Divider Vertical Divider - GIF Demo

Author

  • joehanna

Links

Made with

  • HTML / CSS

About the code

Vertical Divider

CSS vertical divider - coloured and animated.

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

Dependencies: bootstrap.css