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 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
.
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 # funcdef-polygon |
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