How Do CSS Shapes Work?

.float-element {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
}

.element {
  /* Circle */
  shape-outside: circle(50%);

  /* Ellipse */
  shape-outside: ellipse(100px 50px);

  /* Polygon */
  shape-outside: polygon(0 0, 100% 0, 100% 100%);

  /* From image alpha */
  shape-outside: url(shape.png);
}

.element {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 20px; /* Space between shape and text */
}

.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 20px;
}