ellipse()

The ellipse() CSS function is one of the <basic-shape> data types.

Syntax

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

An ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y.

Values

<shape-radius>

Two radii, x and y in that order. These may be a <length>, or a <percentage> or values closest-side and farthest-side.

closest-side: Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.
farthest-side: Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.

<position>

Moves the center of the ellipse. May be a <length>, or a <percentage>, or a values such as left.

Examples

Basic ellipse() example

This example shows an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.

Using closest-side / farthest-side values

The keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.

Specifications

Specification
CSS Shapes Module Level 2 (CSS Shapes 2) # funcdef-polygon

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`ellipse()`	37	79	54	No	24	10.1	37	37	54	24	10.3	3.0