Some of my most popular tutorials have been the series on Sectional Borders and separators.

This is #4 in a series of cool sectional dividers inspired by the techniques used on tympanus.net.  The tips on tympanus.net are pretty much self explanatory when you dig into the stylesheet but may be a little intimidating to non-css folks.

There are just a few things you have to adjust in Divi. So here is a novice-friendly step by step tutorial for creating a rounded split between sections in Divi using only CSS.

Click Here To View Live Demo

Click Here To View Live Demo

Lets Get Started

First thing you need to do is assign a unique CSS Class to the section you would like to have the rounded split on top of.

1. Open the section settings

rounded split image 1

 

2. Give it the following CSS Class: roundedsplit

 rounded split image 3

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.


/*------------------------------------------------*/
/*-----------[Rounded Split - Quiroz.co]----------*/
/*------------------------------------------------*/

/* Rounded center split and bottom rounded */

	.roundedsplit::before,
	.roundedsplit::after {
		position: absolute;
		content: '';
		pointer-events: none;}

	.roundedsplit {
		border-radius: 0 0 80px 80px;}

	.roundedsplit::before,
	.roundedsplit::after {
		top: -70px;
		left: 0;
		z-index: 10;
		width: 50%;
		height: 70px;
		background: inherit;}

	.roundedsplit::before {
		border-radius: 0 80px 0 0;}

	.roundedsplit::after {
		left: 50%;
		border-radius: 80px 0 0 0;}

 

Final Touches

1. Now you may notice that the split infringes on the content above it losing some of that padding between the end of the content and the split.

rounded split image 4

 

 

2. So what you will want to do is add a Divider Module after the content in the section above the rounded split.

rounded image split 5

 

3. And give the divider a height of about 40

rounded split image 6

 

And that’s it!

View Demo

By the way. I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? Every penny helps me to continue to provide these Divi tutorials free for all to learn and grow 😉

 


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!