Back to Content

circle()

files/en-us/web/css/reference/values/basic-shape/circle/index.md

latest3.2 KB
Original Source

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()")}}

css
clip-path: circle(50px);
css
clip-path: circle(6rem at right center);
css
clip-path: circle(10% at 2rem 90%);
css
clip-path: circle(closest-side at 5rem 6rem);
css
clip-path: circle(farthest-side);
html
<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>
css
#default-example {
  background: #ffee99;
}

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

Syntax

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

Values

  • <shape-radius>

    • : This may be a {{cssxref("length")}}, or a {{cssxref("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 farthest side in any dimension.
  • <position>

    • : Moves the center of the circle. May be a {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as left. The <position> value defaults to center if omitted.

Formal syntax

{{csssyntax}}

Examples

Basic circle

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.

html
<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>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

{{EmbedLiveSample("circle", "", "300px")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
  • Guide to Basic Shapes