circle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Try it

Syntax

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

Values

<shape-radius>

This may be a <length>, or a <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 <length>, or a <percentage>, or a values such as left. 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> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

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

Examples

Basic circle

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

Specifications

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-circle

Browser compatibility

BCD tables only load in the browser

See also