CSS ellipse() Function

CSS ellipse() Function

The CSS ellipse() function defines an elliptical shape using horizontal and vertical radii, with an optional center position.

It is commonly used with the clip-path property to control which parts of an element are visible and with shape-outside to make text wrap around an elliptical boundary. The function is part of the CSS <basic-shape> data type.

Syntax

ellipse()
ellipse(radius-x radius-y)
ellipse(radius-x radius-y at position)

The function accepts two optional radii and an optional center position. If the radii are omitted, they default to closest-side. If the position is omitted, the ellipse is centered.

For example:

.shape {
  clip-path: ellipse(45% 35% at center);
}

This creates an ellipse with a horizontal radius of 45% and a vertical radius of 35%, centered within the reference box.

Additional examples:

clip-path: ellipse();
clip-path: ellipse(100px 60px);
clip-path: ellipse(50% 35%);
clip-path: ellipse(40% 50% at 30% 40%);
clip-path: ellipse(closest-side farthest-side);
clip-path: ellipse(closest-side at right center);

The function returns a CSS <basic-shape> value, not an image or a new HTML element.

Parameters

The ellipse() function uses the following parameters.

For example:

clip-path: ellipse(120px 70px at 50% 50%);

The horizontal radius is 120 pixels, the vertical radius is 70 pixels, and the center is positioned halfway across and halfway down the reference box.

Both radii must be non-negative. Negative radius values are invalid.

How It Works

An ellipse is defined by two radii measured from its center.

The horizontal radius controls its width, while the vertical radius controls its height.

For example:

.oval {
  clip-path: ellipse(100px 50px at center);
}

The ellipse has a total width of 200 pixels and a total height of 100 pixels before any clipping by the reference box.

When used with clip-path, content outside the elliptical region is hidden.

When used with shape-outside, the ellipse determines how nearby inline content wraps around a floated element. It does not change the element's visible appearance by itself.

The reference box determines how percentages and radius keywords are resolved.

Horizontal and Vertical Radii

The first radius controls the horizontal dimension, and the second controls the vertical dimension.

For example:

clip-path: ellipse(100px 50px);
clip-path: ellipse(50px 100px);
clip-path: ellipse(80px 80px);

The first creates a wide ellipse, the second creates a tall ellipse, and the third creates a circular shape.

Percentage radii are calculated relative to the corresponding dimensions of the reference box.

For a reference box measuring 200 by 120 pixels, ellipse(50% 50%) produces horizontal and vertical radii of 100 and 60 pixels.

To create a true circle, use equal absolute radii or the circle() function.

Radius Keywords

Radius keywords calculate the ellipse's dimensions from the reference box and center position.

For example:

clip-path: ellipse(closest-side closest-side);
clip-path: ellipse(farthest-side farthest-side);
clip-path: ellipse(closest-side farthest-side at 30% 40%);

When the ellipse is centered, closest-side and farthest-side produce the same radii because the center is equally distant from opposite sides.

When the center moves away from the middle, these keywords can produce different results.

The latest specification also defines closest-corner and farthest-corner radius keywords. Browser support for these newer values may differ from support for the established side-based keywords.

For broader compatibility, use explicit radii or closest-side and farthest-side.

Center Position

The optional at keyword specifies the ellipse's center.

For example:

clip-path: ellipse(40% 35% at center);
clip-path: ellipse(40% 35% at left center);
clip-path: ellipse(40% 35% at right center);
clip-path: ellipse(40% 35% at 30% 60%);

Position values can use keywords, lengths, or percentages.

If no position is provided, the center defaults to center.

Moving the center can create partial ellipses or asymmetrical clipping effects.

Using ellipse() with clip-path

The clip-path property uses ellipse() to hide portions of an element outside the defined shape.

For example:

.image {
  clip-path: ellipse(45% 40% at center);
}

The visible area becomes elliptical while the element retains its original layout dimensions.

Another example:

.banner {
  clip-path: ellipse(75% 60% at 50% 30%);
}

This creates a large elliptical clipping region positioned above the center of the element.

Content outside the clipping region is hidden, including portions of backgrounds, images, and descendants.

The function can be used on images, containers, and other rendered elements.

Using ellipse() with shape-outside

The shape-outside property uses ellipse() to control how inline content wraps around a floated element.

For example:

.floating-shape {
  float: left;
  width: 150px;
  height: 120px;
  shape-outside: ellipse(50% 50%);
}

Text can follow the elliptical boundary instead of wrapping around the element's rectangular margin box.

The shape-outside property requires a floated element to affect surrounding inline content.

It does not clip the element's visible appearance. To make the element itself elliptical, combine it with clip-path:

.floating-shape {
  float: left;
  width: 150px;
  height: 120px;
  background-color: #0066cc;
  clip-path: ellipse(50% 50%);
  shape-outside: ellipse(50% 50%);
  shape-margin: 10px;
}

The shape-margin property adds spacing between the elliptical boundary and surrounding text.

Example

This example demonstrates three different elliptical clipping shapes.

HTML:

<div class="ellipse-demo">
  <div class="ellipse-demo-item">
    <div class="ellipse-shape ellipse-wide"></div>
    <span>Wide Ellipse</span>
  </div>
  <div class="ellipse-demo-item">
    <div class="ellipse-shape ellipse-tall"></div>
    <span>Tall Ellipse</span>
  </div>
  <div class="ellipse-demo-item">
    <div class="ellipse-shape ellipse-offset"></div>
    <span>Offset Center</span>
  </div>
</div>

CSS:

.ellipse-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 15px 0;
}
.ellipse-demo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ellipse-shape {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, #0066cc, #66ccff);
}
.ellipse-wide {
  clip-path: ellipse(48% 28% at center);
}
.ellipse-tall {
  clip-path: ellipse(28% 48% at center);
}
.ellipse-offset {
  clip-path: ellipse(45% 35% at 30% 40%);
}

The first ellipse is wider than it is tall. The second is taller than it is wide. The third uses a center positioned at 30% horizontally and 40% vertically.

Text Wrapping Example

This example demonstrates how text wraps around an elliptical shape using shape-outside.

HTML:

<div class="ellipse-wrap-demo">
  <div class="ellipse-wrap-shape"></div>
  <p>CSS shapes allow text to follow curved boundaries instead of rectangular boxes. The ellipse() function defines the horizontal and vertical radii of the shape, while shape-outside controls how surrounding text flows around it. This makes it possible to create more flexible page layouts using CSS.</p>
</div>

CSS:

.ellipse-wrap-demo {
  max-width: 480px;
  min-height: 160px;
  margin: 0 auto;
  display: flow-root;
}
.ellipse-wrap-demo p {
  margin: 0;
  line-height: 1.6;
}
.ellipse-wrap-shape {
  float: left;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #0066cc, #66ccff);
  clip-path: ellipse(50% 50%);
  shape-outside: ellipse(50% 50%);
  shape-margin: 10px;
}

The blue shape is clipped to an ellipse, and the paragraph follows its curved boundary. The shape-margin value adds 10 pixels of spacing between the shape and text.

ellipse() vs. circle()

Both functions create rounded shapes, but they use different radius definitions.

For example:

.ellipse {
  clip-path: ellipse(45% 30%);
}
.circle {
  clip-path: circle(40%);

}

Use ellipse() when independent horizontal and vertical radii are needed. Use circle() when a circular boundary is required.

Transitions and Animations

Elliptical clipping shapes can be animated by changing their radii or center positions.

For example:

.animated-ellipse {
  clip-path: ellipse(30% 30% at center);
  transition: clip-path 0.4s ease;
}
.animated-ellipse:hover,
.animated-ellipse:focus-visible {
  clip-path: ellipse(50% 45% at center);
}

The visible area expands when the element is hovered or receives keyboard focus.

For a keyboard-accessible example, apply the class to a naturally focusable element, such as a button.

To respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .animated-ellipse {
    transition: none;
  }
}

For smooth interpolation, use compatible shape functions and corresponding radius values in both states.

Common Uses

The ellipse() function is useful for creating curved visual boundaries and custom text layouts.

For example:

.profile-image {
  width: 240px;
  height: 160px;
  object-fit: cover;
  clip-path: ellipse(50% 50%);
}

This displays an image inside an oval clipping region.

Limitations

The ellipse() function has several important rules and limitations.

• Horizontal and vertical radii must be non-negative.
• When explicit radii are supplied, both horizontal and vertical values are required.
• Percentage radii depend on the reference box dimensions.
• The at keyword is required when specifying a center position.
• clip-path hides content outside the shape but does not change the element's layout dimensions.
• shape-outside affects text wrapping around floated elements, not the visible shape by itself.
• Parts of an ellipse extending beyond a clipping reference box may not be visible.
• Newer radius keywords may have more limited browser support than established syntax.

For example, this is valid:

clip-path: ellipse(50% 35% at center);

The following is invalid because the horizontal radius is negative:

clip-path: ellipse(-50px 30px);

The following is invalid because it provides only one explicit radius:

clip-path: ellipse(50px);

Use two radii, a supported radius keyword, or omit the radii entirely.

Browser Support

The CSS ellipse() function is Baseline Widely available. It has been supported across major browser engines since January 2020.

It works in current versions of Chrome, Edge, Firefox, Safari, and other modern browsers when used with established clip-path and shape-outside syntax.

Some newer radius keywords, including closest-corner and farthest-corner, may have more limited support.

For example:

.shape {
  clip-path: ellipse(45% 35% at center);
}

For current compatibility information, visit Can I Use? . For text wrapping, search for CSS Shapes or shape-outside.

Specifications

The ellipse() function is defined in the CSS Shapes Module Level 1 .

The specification defines the function's radii, center position, and relationship to the reference box.

Related CSS features include circle(), inset(), polygon(), clip-path, shape-outside, and shape-margin.