How to Make an Egg with CSS

Learn two simple, production-ready ways to draw an egg shape with pure CSS. Below you’ll find a live preview, copy‑paste CSS, and tips to center content inside the egg.

Live Preview: Egg

Method 1: Uneven Border-Radius Egg

.egg {
  width: 140px;
  height: 180px;
  background: #cd5454;
  /* Symmetric egg: equal left/right values */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  /* Optional centering for demo containers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Tip: To intentionally skew the egg, make bottom-left/bottom-right
   horizontal radii different (e.g., 45% 55%). */

Method 2: Clip-Path Egg (Polygon)

.egg {
  width: 140px;
  height: 180px;
  background: #cd5454;
  /* Approximate egg silhouette with a polygon path */
  -webkit-clip-path: polygon(
    50% 0%,
    61% 5%, 70% 12%, 76% 20%,
    80% 30%, 82% 40%, 81% 50%,
    78% 60%, 72% 70%, 62% 80%,
    50% 86%,
    38% 80%, 28% 70%, 22% 60%,
    19% 50%, 18% 40%, 20% 30%,
    24% 20%, 30% 12%, 39% 5%
  );
  clip-path: polygon(
    50% 0%,
    61% 5%, 70% 12%, 76% 20%,
    80% 30%, 82% 40%, 81% 50%,
    78% 60%, 72% 70%, 62% 80%,
    50% 86%,
    38% 80%, 28% 70%, 22% 60%,
    19% 50%, 18% 40%, 20% 30%,
    24% 20%, 30% 12%, 39% 5%
  );
  /* Optional centering for demo containers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

How This Works

The uneven border-radius method assigns different horizontal/vertical radii to each corner. Larger vertical radii on the top corners and smaller ones on the bottom create the characteristic egg taper at the top and roundness at the bottom. Keep left/right values equal for symmetry; vary them if you want a subtle tilt.

The clip-path method masks a rectangle with a custom polygon that traces an egg-like silhouette. It’s highly customizable point-by-point and will clip any overflowing content to the egg’s outline.

How to Center Content Inside an Egg

The easiest approaches are Flexbox or Grid. Add one of the snippets below to your egg class to center text or icons perfectly inside the shape.

Method 1: Use CSS Flexbox

.egg {
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.egg {
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use border-radius when you want a simple, scalable egg with smooth edges; borders will follow the shape and inner content won’t be cropped. Use clip-path when you need a very specific silhouette or stylized egg; note that inner content will be clipped to the path and older browsers may need fallbacks.

Adding an Outline (Stroke)

With clip-path, a CSS border remains rectangular and is then clipped by the path; it doesn’t follow the egg outline. Use one of the techniques below, or consider an SVG for a true vector stroke.

Option A: Wrapper + Pseudo-element (outer stroke)

Place the egg inside a wrapper that is not clipped. Draw the outer stroke with the wrapper’s pseudo-element, and clip both the pseudo-element and the inner egg with the same path.

<!-- HTML -->
<div class="egg-wrap">
  <div class="egg"></div>
</div>

/* CSS */
.egg-wrap {
  --egg-path: polygon(
    50% 0%,
    61% 5%, 70% 12%, 76% 20%,
    80% 30%, 82% 40%, 81% 50%,
    78% 60%, 72% 70%, 62% 80%,
    50% 86%,
    38% 80%, 28% 70%, 22% 60%,
    19% 50%, 18% 40%, 20% 30%,
    24% 20%, 30% 12%, 39% 5%
  );
  position: relative;
  display: inline-block;
}

.egg-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;              /* stroke width (outer) */
  background: #fff;         /* stroke color */
  -webkit-clip-path: var(--egg-path);
  clip-path: var(--egg-path);
  pointer-events: none;
  z-index: 0;
}

.egg {
  position: relative;
  width: 140px;
  height: 180px;
  background: #cd5454;
  -webkit-clip-path: var(--egg-path);
  clip-path: var(--egg-path);
  z-index: 1;               /* sit above the stroke */
}

Option B: Wrapper (inner stroke)

.egg-wrap {
  --egg-path: polygon(
    50% 0%,
    61% 5%, 70% 12%, 76% 20%,
    80% 30%, 82% 40%, 81% 50%,
    78% 60%, 72% 70%, 62% 80%,
    50% 86%,
    38% 80%, 28% 70%, 22% 60%,
    19% 50%, 18% 40%, 20% 30%,
    24% 20%, 30% 12%, 39% 5%
  );
  display: inline-block;
  padding: 4px;          /* stroke width */
  background: #fff;      /* stroke color */
  -webkit-clip-path: var(--egg-path);
  clip-path: var(--egg-path);
}
.egg {
  width: 140px;
  height: 180px;
  background: #cd5454;
  -webkit-clip-path: var(--egg-path);
  clip-path: var(--egg-path);
}

For a perfect vector stroke that scales cleanly at any size, use an SVG path with stroke.

Quick Customizations

  • Color: update background: #cd5454; to any hex, HSL, or CSS variable.
  • Border/outline: border works as expected on the border-radius egg. For clip-path, use the outline techniques above.
  • Speckled effect: layer a subtle repeating-radial-gradient over the egg background.

Accessibility & SEO

  • Purely decorative eggs: hide them from assistive tech with aria-hidden=”true” (or role=”presentation”).
  • Meaningful eggs (convey information): give them semantics and an accessible name. Example: role=”img” with a clear aria-label that reflects purpose (e.g., aria-label=”Easter sale”). Alternatively, associate visible or visually hidden text with aria-labelledby.
  • Avoid labels like “Decorative egg icon” if the egg conveys meaning. If you use a div, don’t rely on aria-label alone, add role=”img” or use semantic HTML.
  • For text inside the egg, ensure sufficient color contrast.