The ellipse() function is a shape function used to specify a `<basic-shape>`

.

The `<basic-shape>`

CSS value represents a basic shape that is defined using a **shape function**. A basic shape can then be passed as a value to a property such as the `shape-outside`

property, or the `clip-path`

property, which are used to apply the shape to an element in order to change the flow of content around it, or to clip the element to the defined shape, respectively.

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? ) /* where.. */ <shape-radius> = <length> | <percentage> | closest-side | farthest-side

The `ellipse()`

function defines an ellipse shape. It takes the same arguments list and values as the `circle()`

function, except that instead of taking one shape radius value, it takes two radii, **rx and ry**, that represent the x-axis and y-axis radii of the ellipse, in that order. Also, 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.

See the `circle()`

function description in the `<basic-shape>`

entry for more information about the possible arguments, their meanings, and possible values.

Note about `closest-side`

: For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

Note about `farthest-side`

: For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

The following are all valid `ellipse()`

shape declarations:

ellipse(); /* use default values */ ellipse(100px 50px at 30% 50%); /* ellipse of x-radius 100px and y-radius 50px positioned at 30% horizontally and 50% vertically */ ellipse(farthest-side closest-side at 25% 25%); /* defines an ellipse whose x-radius is half the length of the longest side, and whose y-radius is half the length of the shorter side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/ ellipse(10em 10em at 500px 300px); /* defines a ellipse whose center is positioned at 500px horizontally and 300px vertically, with both x and y radii of 10em (this is basically a circle) */

## Browser Support

### CSS Shapes Level 1

Allows geometric shapes to be set in CSS to define an area for text to flow around. Includes properties `shape-outside`, `shape-margin` and `shape-image-threshold`

W3C Candidate Recommendation

Supported from the following versions:

#### Desktop

- 37
- 62
- No
- 24
- 10

#### Mobile / Tablet

- 10
- 76
- No
- 76
- 68