Website Designs with Round Headers?

Does anyone have any examples of live websites with round headers? Similar to this:

I’m working on something for a client and have come up with a design with a round header, however I need some different examples of live sites so that I can see how they’re built. I’ve scoured the web and can’t find any decent examples.

If anyone can steer me in the right direction, I would greatly appreciate it!


Probably the best approach is to play around with Clippy which will help you with the shape you are looking for and neatly output the CSS for you.

Then it’s just a case of tweaking and integrating into your design. I’ve pulled together an example in Codepen that should help. Here is the essential CSS:

-webkit-clip-path: ellipse(60% 80% at 50% 0%);
clip-path: ellipse(50% 17% at 50% 0%);

Enjoy tinkering 🙂

Credit to Lea Verou for the herringbone pattern.

Source : Link , Question Author : Benny Pinto , Answer Author : dotschko

Leave a Comment