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
CSS Shapes Module Level 2 (CSS Shapes 2) # funcdef-circle

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`circle()`	37	79	54	No	24	10.1	37	37	54	24	10.3	3.0