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.
It is documented as part of the CSS Shapes specification.
Syntax
/* Usage 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%);
}
/* Syntax */
shape-outside: none;
/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;shape-outside Browser support
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.
37+
62+
10.1+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more