Collection
Post cover
Created 9 month back

11 CSS Horizontal Dividers

Collection of interesting HTML and CSS horizontal dividers. Design and code examples.

Post cover

SVG Page Separator

Author: Alexandr Kazakov

Links: Demo & code

Simple responsive page separator with SVG.

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

Responsive: yes

Post cover

Fancy divider

Author: Anthony Law Liddle

Links: Demo & code

Is used <hr> standard HTML tag for show divider.

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

Responsive: yes

Post cover

Waves Content Divider

Author: CMDW

Links: Demo & code

Waves content divider using CSS.

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

Responsive: yes

Post cover

Rainbowy Dashed Divider

Author: Simon Goellner

Links: Demo & code

Pretty CSS rainbowy dashed animated divider.

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

Post cover

Slanted Sections

Author: Adam Quinlan

Links: Demo & code

Slanted sections usign translateY(); CSS function.

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

Responsive: yes

Post cover

Responsive Skewed Page Dividers

Author: chilli con code

Links: Demo & code

Responsive skewed page dividers using CSS gradients only.

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

Responsive: yes

Post cover

SVG Section Divider

Author: CodyHouse

Links: Demo & code

Divider make with SVG.

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

Responsive: yes

Post cover

Row Separator

Author: Emanuele

Links: Demo & code

Row Separator - collection of divider styles.

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

Responsive: yes

Post cover

A Collection of Separator Styles

Author: Mary Lou

Links: Article, Demo

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

Post cover

Responsive Scalloped Page Dividers

Author: chilli con code

Links: Demo & code

Responsive scalloped page dividers using CSS gradients.

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

Responsive: yes

Post cover

SVG section dividers

Author: Rinaw

Links: Demo & code

SVG section dividers, embedded with data-uri and used SASS for coloring dividers.

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

Responsive: yes

Dependencies: bootstrap.css

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback