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.
- 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.
- 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.
- Moves the center of the ellipse. May be a
<length>, or a
<percentage>, or a values such as
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.
The keyword values of
farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.
No specification found
No specification data found for
Check for problems with this page or contribute a missing
spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.