ellipse()

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) */