ellipse()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The ellipse()
CSS function is one of the <basic-shape>
data types.
Try it
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 valuesclosest-side
andfarthest-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 asleft
. The<position>
value defaults to center if omitted.
Formal syntax
<ellipse()> =
ellipse( <radial-size>? [ at <position> ]? )
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
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 center 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 1 # funcdef-basic-shape-ellipse |
Browser compatibility
BCD tables only load in the browser
See also
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes