circle()

The circle() function is a shape function used to specify a <basic-shape>.

The <basic-shape> CSS value represents a basic shape that is defined using a shape function. A basic shape can then be passed as a value to a property such as the shape-outside property, or the clip-path property, which are used to apply the shape to an element in order to change the flow of content around it, or to clip the element to the defined shape, respectively.

circle() = circle( [<shape-radius>]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
                

The circle() function is used to define a circle. The question marks indicate that both parameters are optional and can be omitted. If you omit one, that parameter is set to its default value by the browser.

If you omit the position argument, the center of the circle will be positioned at the center of the element it is used on. You can specify a position using the same syntax as that of the background-position property syntax. The position is preceded by the at word.

The shape-radius parameter specifies the radius of the circle. It can be set in absolute lengths or percentages. A percentage value here is resolved from the used width and height of the reference box. Negative values are not allowed.

In addition to using lengths and percentages to specify the circle’s radius, it can also be set using one of two keywords: closest-side or furthest-side. closest-side is the default value, which means that, if you omit this argument and don’t specify a radius for the circle, the browser will use the length from the center of the element to its closest side in any dimension as the length of the radius. farthest-side uses the length from the center to the farthest side.

The following illustration explains the closest-side and farthest-side radius values visually.

The following are all valid circle() shape declarations:

circle(); 
/* use default values: circle with closest-side radius,
positioned at the center of the element */

circle(100px at 30% 50%);
/* circle of radius 100px positioned at 30% horizontally
and 50% vertically */

circle(farthest-side at 25% 25%);
/* defines a circle whose radius is half the length of
the longest side, positioned at the point of
coordinates 25% 25% on the element’s coordinate system */

circle(10em at 500px 300px);
/* defines a circle whose center is positioned at 500px
horizontally and 300px vertically, with a radius of
10em */