DEV Community

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

Posted on • Originally published at alvaromontoro.com

21 2 1 1 1

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:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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 🐣

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay