circle()
The circle() CSS function is one of the <basic-shape> data types.
Try it
Syntax
css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
Values
<shape-radius>-
This may be a
<length>, or a<percentage>or valuesclosest-sideandfarthest-side.closest-side-
Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.
farthest-side-
Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension.
<position>-
Moves the center of the circle. May be a
<length>, or a<percentage>, or a values such asleft. The<position>value defaults to center if omitted.
Examples
Basic circle
In the example below, the shape-outside property has a value of circle(50%), which defines a circle on a floated element for the text to flow round.
Specifications
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
circle() | |||||||||||
See also
- Properties that use this data type:
clip-path,shape-outside - Guide to Basic Shapes