Thecircle()CSSfunction defines a circle using a radius and a position. It is one of the<basic-shape> data types.

Try it

clip-path: circle(50px);

clip-path: circle(6rem at right center);

clip-path: circle(10% at 2rem 90%);

clip-path: circle(closest-side at 5rem 6rem);

clip-path: circle(farthest-side);

<section>  <div></div></section>

#default-example {  background: #ffee99;}#example-element {  background: linear-gradient(to bottom right, #ff5522, #0055ff);  width: 100%;  height: 100%;}

Syntax

shape-outside: circle(50%);clip-path: circle(6rem at 12rem 8rem);

Values

<shape-radius>

This may be a<length>, or a<percentage> or valuesclosest-side andfarthest-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 farthest side in any dimension.

<position>

Moves the center of the circle. May be a<length>, or a<percentage>, or a values such asleft. The<position> value defaults to center if omitted.

Formal syntax

<circle()> =
circle(<radial-size>?[at<position>]?)

<radial-size> =
<radial-extent>|
<length [0,∞]>|
<length-percentage [0,∞]>{2}

<position> =
<position-one>|
<position-two>|
<position-four>

<radial-extent> =
closest-corner|
closest-side|
farthest-corner|
farthest-side

<length-percentage> =
<length>|
<percentage>

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

Examples

Basic circle

In the example below, theshape-outside property has a value ofcircle(50%), which defines a circle on a floated element for the text to flow round.

<div>  <img    alt="A hot air balloon"    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />  <p>    One November night in the year 1782, so the story runs, two brothers sat    over their winter fire in the little French town of Annonay, watching the    grey smoke-wreaths from the hearth curl up the wide chimney. Their names    were Stephen and Joseph Montgolfier, they were papermakers by trade, and    were noted as possessing thoughtful minds and a deep interest in all    scientific knowledge and new discovery. Before that night—a memorable night,    as it was to prove—hundreds of millions of people had watched the rising    smoke-wreaths of their fires without drawing any special inspiration from    the fact.  </p></div>

body {  font: 1.2em / 1.5 sans-serif;}img {  float: left;  shape-outside: circle(50%);}

Specifications

Browser compatibility

See also

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