DEV Community

Cover image for Drawing an Egg with CSS
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

Drawing an Egg with CSS

Drawing an egg with CSS is simpler than many people imagine. So simple that you can do it with just two properties:

.egg {
  aspect-ratio: 3 / 4;
  border-radius: 100% / 125% 125% 80% 80%;
}
Enter fullscreen mode Exit fullscreen mode

Yes. That’s it! Apply that to a block element, and it will have an egg shape. Let’s see how it works:

  • aspect-ratio: 3 / 4: this value of aspect-ratio indicates that the element will have a width-height proportion of 3-to-4 (e.g., if the width is 300 pixels, the height will be 400 pixels.)
  • border-radius: 100% / 125% 125% 80% 80%: this indicates that the horizontal radius will be 100%, but the vertical radius will be longer in the top (125%) than the bottom (80%), creating the natural egg shape.

The real trick is that the border-radius property can have more than the 1–4 values people usually use. Both horizontal and vertical radii can be specified (separated by a forward slash, with 1–4 values each), allowing oval figures to be created.

Here’s a simple demo showcasing the effect:

Seriously. That’s it! It is that easy. It will take more time to decorate the egg-shaped components than to create the egg-shape itself… And that’s where the fun begins. Enjoy this Easter weekend by decorating some CSS Easter eggs 🤓


And you can even get more creative and draw your own version of an eggy cartoon character. Like this CSS version of the main character in the children’s book The Good Egg by Jory John and Pete Oswald:

Top comments (4)

Collapse
 
jarvisscript profile image
Chris Jarvis

Woah. Thank you. I made some CSS eggs but your border-radius tip makes them look more egg shaped. I'm going to have to paint some more eggs.

Collapse
 
sergeyleschev profile image
Sergey Leschev

Drawing an egg with CSS is very simple and easy. We have also used this technique to create different shapes using border-radius property in our previous projects. It's amazing how much creativity can be expressed through CSS. The idea of decorating CSS Easter eggs is a fun way to celebrate the holiday!

Collapse
 
brense profile image
Rense Bakker

Very neat haha 😁

Collapse
 
evergrowingdev profile image
Cherlock Code 🔎

Cute! Such great fun for Easter 🐣