32+ CSS Dividers

Last Updated on by in CSS Examples
CSS Divider

Welcome to our collection of CSS dividers! In this extensive collection, we have gathered free HTML and CSS code examples that display a diverse range of dividers and were sourced from top sites such as CodePen and GitHub.

As of March 2024, we have added the 16 latest CSS Dividers to our assortment to keep you updated on the latest trends.

Our collection promises to offer the most beautiful and trendy divider styles. In our collection, you’ll find various dividers like vertical and horizontal, with design styles like responsive row separators, creative pixel dividers, SVG dividers, and many more. These examples allow you to create visual separations or distinctions between sections of content on a webpage.

Dividers are useful GUI elements that play an important role in adding structure, enhancing readability, and improving the visual appeal of a webpage. They are significant in elevating your web page’s layout and organization. Whether you seek to describe sections, put emphasis on particular elements, or want to craft a tempting design, our collection presents a load of divider options tailored to meet your precise requirements.

Explore our diverse range to effortlessly enhance your content’s structure and create visually captivating layouts.

01. Responsive Row Separator

See the Pen
Row Separator
by Ema (@emared)
on CodePen.

Author: Ema, @emared
Links: Source Code / Demo
Created on: May 05, 2017
Made with: HTML, CSS
Tags: CSS Row Separator, CSS Section Divider

02. SVG Forested Separator Bar

Add an element of freshness in your web page with an awesome SVG powered separator bar.

See the Pen
SVG forested separator bar
by Olly Hodgson (@thinkdrastic)
on CodePen.


Author: Olly Hodgson, @thinkdrastic
Links: Source Code / Demo
Created on: March 05, 2019
Made with: HTML, CSS

03. Creative CSS Pixel Dividers

cool, handpicked, yet beautiful collection of horizontal CSS pixel dividers.

Pixel Dividers

Author: C4rin3, @c4rin3
Links: Source Code / Demo
Created on: February 13, 2015
Made with: HTML, CSS

04. Responsive Skewed Page Dividers (using CSS gradients)

Get an eye-soothing effect with responsive skewed page dividers built using CSS gradients.

See the Pen
Responsive Skewed Page Dividers (using CSS gradients)
by chilli con code (@chilliconcode)
on CodePen.

Author: chilli con code, @chilliconcode
Links: Source Code / Demo
Created on: November 10, 2015
Made with: HTML, CSS
Tags: Skewed CSS Page Divider, CSS Skew Section Dividers, HTML / CSS Dividers, CSS 3 Gradient Skew Dividers

05. Easy Divider

Easy divider

Author: St.G, @stg
Links: Source Code / Demo
Created on: November 19, 2014
Made with: HTML, CSS

06. CSS Frame Pattern Divider

A user-friendly, colorful collection of frame patterns built with HTML, CSS, and JavaScript comes with custom toggle-border-images functionality.

See the Pen
Frame Patterns
by Bram de Haan (@atelierbram)
on CodePen.

Author: @atelierbram
Links: Source Code / Demo
Created on: May 29, 2016
Made with: HTML, CSS, JS

07. CSS Divider Experiments #1

A handful of list of horizontal separators created with basic CSS and HTML.

Divider Experiments #1

Author: Milan, @Oddgson
Links: Source Code / Demo
Created on: January 30, 2017
Made with: HTML, CSS

08. Text Divider

A simple yet versitile code snippet of text divider crafted with HTML and CSS.

Text Divider

Author: Lynden Oliver, @lyndenoliver
Links: Source Code / Demo
Created on: March 30, 2017
Made with: HTML, CSS

09. CSS Divider using :pseudo elements

CSS Divider using :pseudo elements

Author: Daniel Ilse, @dantilse
Links: Source Code / Demo
Created on: May 27, 2016
Made with: HTML, CSS

10. Rainbowy Dashed Divider

A handful of rainbow border dividers, including rainbow dashed lines and rainbow animated dashed lines

See the Pen
Rainbowy Dashed Divider
by Simon Goellner (@simeydotme)
on CodePen.

Author: Simon Goellner, @simeydotme
Links: Source Code / Demo
Created on: July 26, 2015
Made with: HTML, CSS

11. Dividing Circle

Divinding Circle

Author: Rafael Abensur, @abensur
Links: Source Code / Demo
Created on: September 09, 2023
Made with: HTML, CSS

12. Crooked Section Dividers

The crooked CSS divider allows you to build any number of dividers on your web page. At first, the crooked divider seems peculiar; however, we can’t understand its uniqueness and the touch of creativity the author added to it.

See the Pen
crooked section dividers
by Brandon Kennedy (@brandonkennedy)
on CodePen.

Author: Brandon Kennedy, @brandonkennedy
Links: Source Code / Demo
Created on: April 08, 2015
Made with: HTML, CSS

13. Diagonal Divider

If you are looking to learn how to create a diagonal separator using CSS and HTML, then this CSS divider example is for you. The author made sure to get an abundance of effectiveness in a limited code and managed to maintain user-friendliness.

Diagonal Divider

Author: JD Tinney, @Yappenzo
Links: Source Code / Demo
Created on: August 19, 2014
Made with: HTML, CSS
Tags:

14. Pure CSS Horizontal Divider With Star Icon

Horizontal Divider With Star Icon

Author: Isabel C, @isabelc
Links: Source Code / Demo
Created on:  May 09, 2017
Made with: HTML, CSS

15. CSS Divider

CSS Divider

Author: 大漠 , @airen
Links: Source Code / Demo
Created on:  October 31, 2019
Made with: HTML, CSS

16. Cool Horizontal Divider Headings

Cool Horizontal Divider Headings
Author: Benjamin Knight, @benknight
Links: Source Code / Demo
Created on:  July 03, 2017
Made with: HTML, CSS

17. Resonsive Divider with Content

See the Pen
Resonsive Divider with Content
by Christian Gorke (@WolfInStep)
on CodePen.


Author: Christian Gorke @WolfInStep
Links: Source Code / Demo
Created on: March 6, 2019
Made with: HTML, CSS(SCSS)

18. Single-Element Curly Brace

See the Pen
Single-Element Curly Brace
by Lauren Herda (@lrenhrda)
on CodePen.


Author: Lauren Herda @lrenhrda
Links: Source Code / Demo
Created on: June 19, 2014
Made with: HTML, CSS(Stylus)

19. Jagged Divider

See the Pen
Jagged Divider
by Saminou yengue kizidi (@Saminou24)
on CodePen.


Author: Saminou yengue kizidi @Saminou24
Links: Source Code / Demo
Created on: February 11, 2014
Made with: HTML, CSS

20. SVG section dividers, embedded with Data-URI & colored with SASS

See the Pen
SVG section dividers, embedded with Data-URI & colored with SASS
by rinaw (@rinaw)
on CodePen.


Author: rinaw @rinaw
Links: Source Code / Demo
Created on: February 15, 2019
Made with: HTML(Slim), CSS(SCSS)

21. Slanted Sections

See the Pen
Slanted Sections
by Adam Quinlan (@quinlo)
on CodePen.


Author: Adam Quinlan @quinlo
Links: Source Code / Demo
Created on: January 5, 2019
Made with: HTML, CSS

22. A free collection of SVG separators

See the Pen
A free collection of SVG separators
by XYZZY estudio web (@xyzzyestudioweb)
on CodePen.


Author: XYZZY estudio web @xyzzyestudioweb
Links: Source Code / Demo
Created on:  July 20, 2019
Made with: HTML, CSS

23. Title with horizontal rule and button

See the Pen
Title with horizontal rule and button
by Kevin (@qkevinto)
on CodePen.


Author: Kevin @qkevinto
Links: Source Code / Demo
Created on:  July 1, 2015
Made with: HTML, CSS

24. Horizontal Rule with Font Icons

See the Pen
Horizontal Rule with Font Icons
by Jeff Kinley (@jkinley)
on CodePen.


Author: Jeff Kinley @jkinley
Links: Source Code / Demo
Created on: December 5, 2014
Made with: HTML, CSS(SCSS)

25. Waves Content Divider Using CSS

See the Pen
Waves Content Divider Using CSS
by CMDW (@cmdw)
on CodePen.


Author: CMDW @cmdw
Links: Source Code / Demo
Created on: December 6, 2018
Made with: HTML, CSS

26. Section Separator Inspiration

See the Pen
Section Separator Inspiration
by Luke Femur (@lukeyphills)
on CodePen.


Author: Luke Femur @lukeyphills
Links: Source Code / Demo
Created on: November 15, 2013
Made with: HTML, CSS(SCSS)

27. Collection of horizontal rule styles.

See the Pen
Collection of horizontal rule styles.
by Zachary Minner (@1forh)
on CodePen.


Author: Zachary Minner @1forh
Links: Source Code / Demo
Created on:  January 29, 2016
Made with: HTML, CSS(SCSS)

28. SVG page separator

See the Pen
SVG page separator
by Alexandr Kazakov (@alexandr-kazakov)
on CodePen.


Author: Alexandr Kazakov @alexandr-kazakov
Links: Source Code / Demo
Created on: November 17, 2017
Made with: HTML, CSS(SCSS)

29. vertical divider

See the Pen
vertical divider
by Jelena (@jelenagav)
on CodePen.


Author: Jelena @jelenagav
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, CSS

30. Diagonal Split Screen

See the Pen
Diagonal Split Screen
by Chris Smith (@chris22smith)
on CodePen.


Author: Chris Smith @chris22smith
Links: Source Code / Demo
Created on:  December 9, 2018
Made with: HTML, CSS

31. Triangle section Divider

See the Pen
Triangle section Divider
by Mark Sottek (@mark_sottek)
on CodePen.


Author: MARK SOTTEK
Links: Source Code / Demo
Created on:  January 29, 2021
Made with: HTML, CSS

32. Responsive SVG Arrow as Section divider

See the Pen
Responsive SVG Arrow as Section divider
by Domonkos Horvath (@domhorvath)
on CodePen.


Author: Domonkos Horvath @domhorvath
Links: Source Code / Demo
Created on: September 14, 2015
Made with: HTML(Pug), CSS(less)

33. SVG Section Divider | Design in Code

See the Pen
SVG Section Divider | Design in Code
by CodyHouse (@codyhouse)
on CodePen.


Author: CodyHouse @codyhouse
Links: Source Code / Demo
Created on: December 17, 2019
Made with: HTML, CSS(SCSS)