ellipse() CSS Function

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

ellipse()

CSS FunctionThis function is supported by all modern browsers.

Updated 31st December 2025

Description

The ellipse() CSS function is used to define an elliptical shape for clipping, masking, or defining shapes in CSS, most commonly within the clip-path property. It allows you to create an ellipse by specifying its radii along the x and y axes, and optionally, its center position within the element’s bounding box. This function is particularly useful when you want non-rectangular shapes that are more flexible than circles, as it gives control over both axes independently.

The ellipse() function can take values in lengths, percentages, or a mix, where percentages are relative to the element's dimensions. By default, if no center is specified, the ellipse is centered at the midpoint of the element. This makes it easy to create effects like oval buttons, decorative masks, or custom-shaped images.

For example, you could use it in a div to clip content into an elliptical shape:

div {
  clip-path: ellipse(50% 25% at 50% 50%);
}

In this example:

50% 25% defines the horizontal and vertical radii of the ellipse.
at 50% 50% positions the center of the ellipse in the middle of the element.

You can also combine ellipse() with transitions or animations to create dynamic effects, such as morphing shapes or animated image masks. Unlike circle(), which creates a perfectly round shape, ellipse() provides asymmetric flexibility, making it ideal for more organic and visually interesting layouts.

Additionally, ellipse() works well with responsive designs because percentage values adapt to the element’s size, unlike fixed pixel lengths which remain static. This makes it a versatile tool for modern CSS-driven graphics and UI design.

Syntax

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

/* where.. */

<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Values

shape-radius represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.
positionThe position argument defines the center of the ellipse. This defaults to center if omitted.

Example

HTML

<div class="ellipse-container">

  <div class="blue-box"></div>

</div>

CSS

/* The parent container provides the dimensions */

.ellipse-container {

  width: 400px;

  height: 250px;

  background-color: #f0f0f0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.blue-box {

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, #007bff, #00d4ff);

  

  /* - 40% is the horizontal radius

     - 25% is the vertical radius

     - 'at 50% 50%' centers the ellipse 

  */

  clip-path: ellipse(40% 25% at 50% 50%);

}

Result

Open in editor

Browser Support

The following information will show you the current browser support for the CSS ellipse() function. Hover over a browser icon to see the version that first introduced support for this CSS function.

This function is supported by all modern browsers.