Easter egg CSS circles

We are approaching easter, and I couldn’t resist to make eggs on the project I am working on these days:









The trick is really easy. CSS border radius can be applied in ellipsis shapes. Each corner has a  vertical and a horizontal radius. So you really just have to change the vertical radius of each corner like this:


Screen Shot 2015-03-27 at 09.59.44

And voila, the 60% and 40% vertical radius will do the trick.


I can highly recommend this really interesting presentation from Lea Verou on border-radius. It’s 14 minutes and highly worth the time.



Also, CSS Tricks has a collection of pre-cooked css shapes for inspiration: CSS-Tricks.com:ShapesOfCSS

4 Responses to “Easter egg CSS circles”

  1. Malou Peters Says:

    Nice! I’ll have a look and maybe do something with it next weekend.

  2. Indoglobal Says:

    Approaching easter so we will do best

  3. Eman Toch Says:

    interesting write-up

  4. Pim Nederland Says:

    Haha brilliant easter egg! Did not know it was that simple. Can we expect a tree just before christmas? :)))