Collection of free HTML and CSS divider code examples: vertical, horizontal, etc. Update of May 2019 collection. 2 new items.
Table of Contents
Related Articles
Horizontal Dividers
HTML and CSS horizontal divider code examples (11 items).

Links
Made with
- HTML / CSS (SCSS)
About a code
Fancy Divider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
SVG Section Divider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
Links
Made with
- HTML / CSS
About the code
Slanted Sections
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -

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


Links
Made with
- HTML / CSS
About the code
Row Separator
Row Separator - collection of divider styles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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

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


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


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).


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