back to blogDevlog

Creating a Rounded Section Divider with Pure CSS

full stack web development


In the spirit of eventually moving my music artist website platform away from using Wordpress, I’ve been playing around different ways to implement my favorite visual features from the landing landing page: a rounded divider as such:

Elvann Webpage Rounded Divider Effect

Here’s what it looks like lower on the page:

Elvann Webpage Rounded Divider Effect 02

Looks like a simple enough challenge, but I added an extra layer of challenge: trying to come up with an elegant solution that would allow two sections side-by-side to support having background images, while staying responsive and using pure CSS.


Here were the terms of this challenge:

  • The solution must use only Pure CSS
  • The solution must be responsive
  • Must work with a wide variety of different images and sizes
  • Must support 2 consecutive sections with a background image.


Here are a couple iterations of the problem and solutions I came up with on Codepen

Here’s my solution on Codepen, which uses a custom path: https://codepen.io/elvann/pen/gOBrRWx

If you want to try it yourself you can use this project as a starting point: https://codepen.io/elvann/pen/WNaQKNa