css types basic-shape 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.

See also

• Properties that use this data type: clip-path(), shape-outside()
• Guide to Basic Shapes