How to Make an Oval with CSS

Learn two simple, reliable ways to draw a clean oval in CSS and see a live preview. This guide also shows how to center text or icons inside your oval with Flexbox or Grid.

Live Preview: Oval

Method 1: Using border-radius

/* Oval with border-radius (width ≠ height) */
.oval {
  width: 150px;
  height: 100px;
  background: #cd5454;
  border-radius: 50%; /* Becomes an ellipse when width and height differ */
}

/* Oval with border-radius (width ≠ height) */
.oval {
  width: 150px;
  height: 100px;
  background: #cd5454;
  border-radius: 50%; /* Becomes an ellipse when width and height differ */
}

Method 2: Using clip-path: ellipse()

/* Oval clipped from a rectangle */
.oval-clip {
  width: 150px;
  height: 100px;
  background: #cd5454;
  -webkit-clip-path: ellipse(50% 50% at 50% 50%);
  clip-path: ellipse(50% 50% at 50% 50%);
}

/* Oval clipped from a rectangle */
.oval-clip {
  width: 150px;
  height: 100px;
  background: #cd5454;
  -webkit-clip-path: ellipse(50% 50% at 50% 50%);
  clip-path: ellipse(50% 50% at 50% 50%);
}

How This Works

With border-radius: 50%, a box becomes a circle only if width and height match; when they differ, the curved corners form an ellipse (oval). This is the simplest and most broadly supported approach.

With clip-path: ellipse(), the element is clipped to an elliptical region, letting you keep a plain rectangular box model while visually showing an oval. It’s flexible and animatable, but requires modern browser support.

How to Center Content Inside an Oval

The easiest way to center text or icons inside the oval is to make the oval a Flexbox or Grid container.

Method 1: Use CSS Flexbox

.oval {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

.oval {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

Method 2: Use CSS Grid

.oval {
  display: grid;
  place-items: center; /* centers both axes */
}

.oval {
  display: grid;
  place-items: center; /* centers both axes */
}

When to Use Each Shape Method

Use border-radius for the fastest, most compatible oval with simple sizing and borders. Use clip-path: ellipse() when you need precise clipping, complex animations, or to combine with other clip-path shapes; note that borders are clipped too and external outlines may require a wrapper or outline.

Quick Customizations

Change the color via background (e.g., background: #cd5454;) and adjust proportions by editing width and height. To add a border, use border: 4px solid #333; and consider box-shadow for depth.

Accessibility & SEO

If the oval is decorative only, hide it from assistive tech (e.g., aria-hidden=”true”); if it conveys meaning, ensure nearby text or an accessible name describes its purpose.