shape-outside

The core property for CSS Shapes. It allows text to wrap around complex paths (like circles, polygons, or transparent images) instead of just being limited to rectangular boxes.

.circular-image {
  float: left;
  width: 200px;
  height: 200px;
  /* Text will flow in a curve around this circle instead of a straight line */
  shape-outside: circle(50%);
}
Initial value
none
Inherited
No
Applies to
floats
Animation type
basicShapeOtherwiseNo

Values

none
Widely available Since 2020 96% global usage

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

Safe to use without fallbacks.

37+
62+
10.1+
79+
ESC