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.
Quick example
.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%);
}Quick facts
Initial value
noneInherited
No
Applies to
floats
Animation type
basicShapeOtherwiseNo
Values
noneshape-outside Browser Support
Widely availableSince 202096% 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+