circle()

The circle() CSS function is one of the <basic-shape> data types.

Syntax

shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

Values

<shape-radius>

This may be a <length>, or a <percentage> or values closest-side and farthest-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 as left.

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 Status Comment
CSS Shapes Module Level 1
The definition of 'circle()' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

BCD tables only load in the browser

See also