W3cubDocs

/CSS

circle()

The circle() CSS function 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 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

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

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/circle