CSS circle() Function

❮ Previous Functions Next ❯

Example

.example {
  clip-path: circle(100px);
}




Meaning

The circle() css function defines a circle using a radius and a position.

Version: CSS3




Standard Syntax

circle([shape-radius]? [at position]?)



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Function Arguments

The following table describes the arguments of this function.

Argument Description
shape-radius Defines the radius of the circle. Negative values are not allowed.

value can be in length, or a percentage or values closest-side and farthest-side.

position Moves the center of the circle (it can be in length, or a percentage, or a values such as left).



More Example

Example

.example {
  clip-path: circle(closest-side at 5rem 6rem);
}
❮ Previous Functions Next ❯