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 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
CSS Shapes Module Level 1 # funcdef-basic-shape-circle

Browser compatibility

BCD tables only load in the browser