CSS ellipse() function

Definition and usage

CSS's ellipse() Functions define an ellipse with two radii x and y.

ellipse() Functions usually work with clip-path Properties and shape-outside Used together.

Instance

Example 1

Crops the image into an ellipse with an x radius of 50% and a y radius of 30%:

img {
  clip-path: ellipse(50% 30%);
}

Try it yourself

Example 2

Crops the image into an ellipse with an x radius of 50% and a y radius of 30%, and positions the center of the ellipse to the right:

img {
  clip-path: ellipse(50% 30% at right);
}

Try it yourself

Example 3

Using clip-path and ellipse() To achieve the animation effect:

#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 4

combined use ellipse(),clip-path and shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

Try it yourself

CSS syntax

ellipse(xy-radius at position)

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Reference:CSS clip-path property

Reference:CSS shape-outside attribute

Reference:CSS circle() function

Reference:CSS inset() function

Reference:CSS polygon() function