circle()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The circle()
CSS function defines a circle using a radius and a position. It is one of the <basic-shape>
data types.
Try it
Syntax
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
Values
<shape-radius>
-
This may be a
<length>
, or a<percentage>
or valuesclosest-side
andfarthest-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 farthest 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.
Formal syntax
<circle()> =
circle( <radial-size>? [ at <position> ]? )
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
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
BCD tables only load in the browser
See also
- Properties that use this data type:
clip-path
,shape-outside
- Guide to Basic Shapes