Post thumbnail: 7 CSS Dividers

7 CSS Dividers

Collection of free HTML and CSS divider code examples: vertical, horizontal, etc.

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 (6 items).

Demo image: SVG Page Separator

Author

  • Alexandr Kazakov

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

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

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

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

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

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

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

back to top