CSS circle() function

Definition and usage

CSS's circle() Functions are used to define a circle with a radius and position.

circle() Functions are usually used with clip-path Properties and shape-outside Use the properties together.

Instance

Example 1

Crop the image to a circle with a radius of 50%:

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

Try it yourself

Example 2

Crop the image to a circle with a radius of 50% and position the center to the right:

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

Try it yourself

Example 3

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

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

Try it yourself

Example 4

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

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Try it yourself

CSS syntax

circle(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 property

Reference:CSS ellipse() function

Reference:CSS inset() function

Reference:CSS polygon() function