11 CSS Horizontal Dividers
Collection of interesting HTML and CSS horizontal dividers. Design and code examples.
Collection
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
SVG Section Divider
Author: CodyHouse
Links: Demo & code
Divider make with SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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
Slanted Sections
Author: Adam Quinlan
Links: Demo & code
Slanted sections usign translateY(); CSS function.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Waves Content Divider
Author: CMDW
Links: Demo & code
Waves content divider using CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
SVG Page Separator
Author: Alexandr Kazakov
Links: Demo & code
Simple responsive page separator with SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Row Separator
Author: Emanuele
Links: Demo & code
Row Separator - collection of divider styles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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
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
Rainbowy Dashed Divider
Author: Simon Goellner
Links: Demo & code
Pretty CSS rainbowy dashed animated divider.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
A Collection of Separator Styles
Author: Mary Lou
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
