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 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);

#default-example {
  background: #fe9;
}

#example-element {
  background: linear-gradient(to bottom right, #f52, #05f);
  width: 100%;
  height: 100%;
}

Syntax

css

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

Values

This may be a , or a 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.

Moves the center of the circle. May be a , or a , or a values such as left. The value defaults to center if omitted.

Formal syntax

 = 
  circle( ? [ at  ]? )  

 = 
                 |
                  |
  {2}  

 = 
  [ left | center | right | top | bottom |  ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right |  ] [ top | center | bottom |  ]  |
  [ [ left | right ]  ] && [ [ top | bottom ]  ]  

 = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

 = 
        |

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


  
  
    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.

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