How to Make an Ellipse with CSS

Learn two simple, production-ready ways to draw a smooth ellipse with pure CSS, plus tips for centering content inside and customizing the look.

Live Preview: Ellipse

Method 1: Border-Radius Ellipse

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%; /* Ellipse when width != height */
}

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%; /* Ellipse when width != height */
}

Method 2: clip-path Ellipse

.ellipse-clip {
  width: 200px;
  height: 120px;
  background: #cd5454;
  /* Clips the element (and its descendants) to an ellipse; corners are transparent */
  clip-path: ellipse(50% 50% at 50% 50%);
}

.ellipse-clip {
  width: 200px;
  height: 120px;
  background: #cd5454;
  /* Clips the element (and its descendants) to an ellipse; corners are transparent */
  clip-path: ellipse(50% 50% at 50% 50%);
}

How This Works

With border-radius: 50%, the element’s corners are rounded to half its size; when width and height differ, the result is an ellipse. This is the simplest, most compatible approach, and it visually clips the corners.

With clip-path: ellipse(), the element and its descendants are clipped to an elliptical silhouette without needing overflow: hidden. It’s great for precise cut-out shapes and advanced masking or animated transitions.

How to Center Content Inside an Ellipse

The easiest ways are Flexbox or Grid, which let you vertically and horizontally center any child content with one or two lines of CSS.

Method 1: Use CSS Flexbox

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; /* Centers text/icons inside */
}

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; /* Centers text/icons inside */
}

Method 2: Use CSS Grid

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%;
  display: grid;
  place-items: center; /* Single-line centering */
}

.ellipse {
  width: 200px;
  height: 120px;
  background: #cd5454;
  border-radius: 50%;
  display: grid;
  place-items: center; /* Single-line centering */
}

When to Use Each Shape Method

Use border-radius for simple ellipses (it clips the corners too). It’s fast, widely supported, and perfect for avatars, badges, and pills. If you need child content clipped to the same curve, add overflow: hidden.

Use clip-path for more complex shapes, for clipping the element and all descendants without needing overflow: hidden, or when you need advanced masking and animations. Modern browser support is strong; very old browsers may lack support.

Quick Customizations

Change the color via background: any color/gradient; add a border with border: 3px solid #fff; or create a pill by increasing width and keeping a smaller height. For a robust pill, border-radius: 9999px is a common shorthand that ensures fully rounded ends regardless of size changes (border-radius: 50% works too). You can also add depth with box-shadow for a subtle 3D effect.

Accessibility & SEO

• If purely decorative, hide it from assistive technologies: aria-hidden=”true”.
• If meaningful but not interactive, provide text the user can perceive. Options:
  • Include visible text inside the element.
  • Or add role=”img” with an accessible name, e.g., aria-label=”Status: Online”.
  • Or use semantic markup like <figure> with a <figcaption> describing the shape/content.
• If interactive, use a semantic control like <button> or <a> with proper visible text (or an accessible name) instead of a plain <div>.