Collection of free HTML and CSS divider code examples from Codepen, GitHub, and other resources: vertical, horizontal, etc. Update of February 2021 collection. 5 new items.
Related Articles

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

Links
Made with
- HTML / CSS
About a code
Border Between List Items
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Fancy Title Divider with One Element
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Creating a Pac-Man Themed Divider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Horizontal Dividers
Different methods for dividing content horizontally. Section 1: colors fade out. Section 3: uses transform:skew
to slant section. Section 4: SVG chevron pattern footer (uses clip-path
to create wavy top).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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