The circle() function is a shape function used to specify a
<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
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
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 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
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 */
CSS Shapes Level 1
Allows geometric shapes to be set in CSS to define an area for text to flow around.
W3C Candidate Recommendation
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com