CSS circle() Function
More "Try it Yourself" examples below.
Definition and Usage
The CSS circle() function defines a circle with
a radius and a position.
The circle() 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 | |||||
|---|---|---|---|---|---|
| circle() | 37 | 79 | 54 | 10.1 | 24 |
CSS Syntax
circle(radius at position)
| Value | Description |
|---|---|
| radius | Required. Specifies the radius of the circle. This can be one of the
following values:
|
| at position | Optional. Specifies the center of the circle. 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 a circle with 50% radius and position the center of the circle to the right:
img {
clip-path: circle(50% at right);
}
Try it Yourself »
Example
Animation of clip-path and circle():
#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
Use of circle(), clip-path and shape-outside:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
Try it Yourself »
Related Pages
CSS reference: clip-path property.
CSS reference: shape-outside property.
CSS reference: ellipse() function.
CSS reference: inset() function.
