CSSellipse() 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 »clip-path: ellipse(50% 30%);
}
More "Try it Yourself" examples below.
Definition and Usage
The CSSellipse() function defines an ellipse with two radii x and y.
Theellipse() function is used with theclip-path property and theshape-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 atposition)
| Value | Description |
|---|---|
| xy-radius | Required. Specifies two radii, x and y. This can be one of the following values:
|
| atposition | 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: ellipse(50% 30% at right);
}
Try it Yourself »clip-path: ellipse(50% 30% at right);
}
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 »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%);}
}
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 »float: left;
clip-path: ellipse(50% 30%);
shape-outside: ellipse(55% 35%);
}
CSS reference:clip-path property.
CSS reference:shape-outside property.
CSS reference:circle() function.
CSS reference:inset() function.
CSS reference:polygon() function.
