ellipse()

The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.

.shape {
  clip-path: ellipse(60px 40px);
}

“Drawing” shapes

As with the other functions that produce a basic shape — including circle(), inset(), xywh(), polygon(), path() and shape() — you won’t be drawing shapes directly on the screen in the way you’d normally think. You will either be creating a shape for text and elements to flow around (shape-outside), creating a cookie cutter to cut the shape out of another element (clip-path), or creating a shape that another element could move along (offset-path).

Clarification note: Neither path() nor shape() can be used with the shape-outside property like the other basic shape functions.

Reference box

Before we get too deep, let’s discuss the reference box. This is the box upon which the basic shapes used in shape-outside and clip-path is formulated.

By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.

For the shape-outside property, this means the text and elements will flow around the element as if no shape-outside property was used. For clip-path, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you’ll need to add the appropriate keyword (margin-box, padding-box, border-box, etc.) to clip-path or shape-outside.

The offset-path property is not limited by the reference box in the same way shape-outside and clip-path are limited by it. An offset-path whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is “drawn.” For instance, offset-path cares about the reference box when you use closest-side or farthest-side to set the radius (discussed in detail below).

Basic usage

Let’s start with an example using the clip-path property so that we can more easily see the size and edges of the ellipses we create. We’ll go into more detail soon, but you can just give ellipse() an X and Y radius and it will leave a few words out… Wait, sorry, that’s an ellipsis… this will give you an ellipse.

<div class="ellipsis"><span>&vellip;</span></div>

.ellipsis {
  width: 200px;
  height: 200px;
  background-color: thistle;
  clip-path: ellipse(60px 40px);
}

Note: Though unrelated to the ellipse, the horizontal ellipsis (…) and the vertical ellipsis (⋮) will figure prominently in my examples because silliness makes me smile.

Next we’ll use ellipse() with shape-outside to see text flow around an ellipse.

Because a shape is floated left or right only one side of the ellipse will have text flow around it. So, while the ellipse is fully there, we only see one side of it. It’s similar to how, if we shined a laser at the base of a cylinder, the opposite side of the cylinder would appear in a shadow and its curve would not be seen.

<p>
  **Some text**
  <div class=“ellipsis”></div>
  **Some more text**
</p>

.ellipsis {
  width: 200px;
  height: 200px;
  background-color: dodgerblue;
  shape-outside: ellipse(95px 65px);
  float: left;
}

Notice also that shape-outside does not affect the edges of the element itself, but only the shape around which the content flows. So, the text is willing to flow even on top of the corners of the .ellipsis element because shape-outside, by virtue of having an ellipse smaller than the element, has told the text to ignore those edges when flowing around the element.

Lastly, let’s send the ellipse in an elliptical orbit using offset-path:

<div class="ellipsis"><span>…</span></div>

.ellipsis {
  width: 200px;
  height: 200px;
  background-color: olivedrab;
  /* Cuts the ellipse out of the element */
  clip-path: ellipse(60px 40px);
  /* Defines the animated path */
  offset-path: ellipse(200px 100px);
  offset-distance: 0;
  /* Applies the animation */
  animation: ellipsis-offset 5s linear infinite;
}

/* Defines the animation */
@keyframes ellipsis-offset {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}

Syntax

The ellipse() function takes four parameters. First, the horizontal and vertical radii of the ellipse, then the X and Y coordinates where you want the center to be.

<ellipse()> = ellipse(
  <radial-size>?
  [ at <position> ]?
)

Radii

You can use just about any css unit for the radii. The first radius will be for the horizontal or X-axis and the second radius will be for the vertical or y-axis. If using percentages to set the radii, a horizontal radius will use the width of the element while a vertical radius will use the height of the element.

But besides numbers there are also two keywords you can use:

• closest-side: This sets the radius to be the distance between the center point of the ellipse and the closest vertical or horizontal side of the reference box. If used for the X-radius it will look for the closest left or right side. If used for the Y-radius it will look for the closest top or bottom side.
• farthest-side: This sets the radius to the distance between the center point and the farthest side of the reference box (again X-radius will look at left or right side and Y-radius will look at the top or bottom).

Center point

Setting the center point is optional, leaving it out will set the center point of the ellipse to the center of the element. If you do include a center point you must add the at keyword between the radius and the first coordinate.

Again you can use just about any units to set the center point, plus you can use the keywords: top, right, bottom, left, and center. Despite the default being the center, center point measurements are from the top left. Positive numbers move the point to the right and down.

Browser support

Specification

The CSS ellipse() function is defined in the CSS Shapes Module Level 1 specification, which became a Candidate Recommendation on June 12, 2025. That means it integrates changes from a previous Candidate Recommendation (Draft or Snapshot) to allow for review and for ease of reference to the integrated specification, but those changes have not undergone a formal review.

Related tricks!

Related