circle()

<shape-radius>

Это может быть <length>, или <percentage>, или значения closest-side и farthest-side.

closest-side

Использует расстояние от центра фигуры до ближайшей стороны области отсчёта. Для кругов это ближайшая сторона по любой размерности.

farthest-side

Использует расстояние от центра фигуры до наиболее удалённой стороны области отсчёта. Для кругов это наиболее удалённая сторона по любой размерности.

<position>

Перемещает центр круга. Может быть <length>, или <percentage>, или такие значения, как left. Значение <position> по умолчанию устанавливается в центр, если опущено.

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

В примере ниже свойство shape-outside имеет значение circle(50%), которое определяет круг на элементе с float, вокруг которого будет обтекаться текст.

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

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

• Свойства, использующие этот тип данных: clip-path, shape-outside
• Руководство по базовым фигурам