files/en-us/web/css/reference/values/basic-shape/circle/index.md
The circle() CSS function defines a circle using a radius and a position. It is one of the {{cssxref("basic-shape")}} data types.
{{InteractiveExample("CSS Demo: circle()")}}
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 class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #ffee99;
}
#example-element {
background: linear-gradient(to bottom right, #ff5522, #0055ff);
width: 100%;
height: 100%;
}
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
<shape-radius>
closest-side and farthest-side.
closest-side
farthest-side
<position>
left. The <position> value defaults to center if omitted.{{csssyntax}}
In the example below, the {{cssxref("shape-outside")}} property has a value of circle(50%), which defines a circle on a floated element for the text to flow round.
<div class="box">
<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%);
}
{{EmbedLiveSample("circle", "", "300px")}}
{{Specifications}}
{{Compat}}