CSS ellipse() Function
Example
Clip an image to an ellipse with 50% radius x and 30% radius y:
img {
clip-path: ellipse(50% 30%);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS ellipse() function defines an
ellipse with
two radii x and y.
The ellipse() function is used with the
clip-path property and the
shape-outside property.
| Version: | CSS Shape Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| ellipse() | 37 | 79 | 54 | 10.1 | 24 |
CSS Syntax
ellipse(xy-radius at position)
| Value | Description |
|---|---|
| xy-radius | Required. Specifies two radii, x and y. This can be one of the
following values:
|
| at position | Optional. Specifies the center of the ellipse. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center |
More Examples
Example
Clip an image to an ellipse with 50% radius x and 30% radius y, and position the center of the ellipse to the right:
img {
clip-path: circle(50% at right);
}
Try it Yourself »
Example
Animation of clip-path and ellipse():
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: green;
animation: mymove
5s infinite;
clip-path: ellipse(80% 50%);
}
@keyframes
mymove {
50% {clip-path: ellipse(30% 10%);}
}
Try it Yourself »
Example
Use of ellipse(), clip-path and shape-outside:
img {
float: left;
clip-path: ellipse(50% 30%);
shape-outside: ellipse(55% 35%);
}
Try it Yourself »
CSS reference: clip-path property.
CSS reference: shape-outside property.
CSS reference: circle() function.
CSS reference: inset() function.
