CSS shape-outside Property
Use the shape-outside CSS property allows content to wrap around a specified shape. See property values and examples.
The shape-outside CSS property defines a shape around which adjacent inline content (usually text) wraps. It lets you break out of the rectangular box model and flow text along a circle, an ellipse, a polygon, or even the silhouette of an image.
By default, inline content wraps around the rectangular margin box of a floated element. The shape-outside property replaces that rectangle with a custom shape, so the text follows curves and angles instead of straight edges.
This page covers what shape-outside does, the values it accepts (<basic-shape>, <shape-box>, and <image>), runnable examples for each, and the gotchas you need to know to make it work.
When and why to use it
Use shape-outside when you want text to hug a non-rectangular object — for example, wrapping a paragraph around a circular avatar, a triangular pull-quote, or a cut-out product photo. It is a purely visual, presentational feature: it changes how text flows, not the actual geometry of the element. The element itself stays a rectangular box.
Three rules are essential to remember:
- The element must be floated.
shape-outsideonly takes effect on floated elements (float: leftorfloat: right). It is ignored on elements that are not floated. - The element needs a width and height. A
<basic-shape>likecircle()is resolved relative to the element's box, so the box must have explicit dimensions. shape-outsidedoes not clip the element. It only reshapes the float area that text avoids. To visually clip the box to the same shape, pair it with theclip-pathproperty using the same shape function (you will see this in the examples below).
Animations and transitions can manipulate shape-outside when the value is a <basic-shape>.
| Initial Value | None |
|---|---|
| Applies to | Any element. |
| Inherited | No. |
| Animatable | Yes, as specified for <basic-shape>. |
| Version | CSS3 |
| DOM Syntax | object.style.shapeOutside = "margin-box"; |
Syntax
shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;The companion property shape-margin adds space between the shape and the wrapping text, and shape-image-threshold controls which pixels of an image count when the value is an <image>.
Example: wrapping text around an ellipse
The ellipse() shape function takes two radii and an optional position. Note how clip-path repeats the same value so the visible green box matches the shape the text wraps around.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: ellipse(120px 200px at 40% 50%);
clip-path: ellipse(120px 200px at 40% 50%);
width: 300px;
height: 500px;
float: right;
opacity: 0.6;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Example: wrapping text around an image
When the value is a url() pointing to an image, the browser builds the shape from the image's alpha channel — the float area follows the non-transparent (opaque) pixels. This only works for images that allow CORS access, and the image needs transparency for the effect to be visible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
width: 250px;
shape-outside: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="left" />
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="right" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Example: wrapping text around a polygon
The polygon() function accepts a list of x y coordinate pairs that define the vertices of the shape. Use it for triangles, arrows, or any free-form outline with three or more points.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
clip-path: polygon(0 0, 0 200px, 300px 600px);
width: 300px;
height: 300px;
float: left;
opacity: 0.3;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Values
| Value | Description |
|---|---|
| none | There is no shape applied. The element’s float area is not affected. |
<shape-box> | The float area is determined according to the shape of a float element's edges. <shape-box> can be one of the four values: margin-box, border-box, padding-box, content-box. Any curvature included in the shape is created by the border-radius property. |
<basic-shape> | The float area is determined by a shape function: inset() for inset rectangles, circle() for circles, ellipse() for ellipses, and polygon() for any shape with three or more vertices. |
<image> | The shape is extracted and determined based on the alpha channel of the specified <image>. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent element. |
Common gotchas
- Nothing happens if the element is not floated. This is the single most common mistake.
shape-outsideis silently ignored withoutfloat: leftorfloat: right. - The box still looks rectangular.
shape-outsideonly changes the float area, not the element's appearance. Add a matchingclip-pathif you want the box to be visually clipped to the shape too. - Percentages resolve against the element's box, so an element with no height (or a collapsed one) will not produce the expected shape.
- Use
shape-marginfor breathing room. Text can crowd right up against the shape edge;shape-marginadds a uniform gap.
Browser support
shape-outside is supported in all modern browsers (Chrome, Edge, Firefox, Safari, and Opera). It degrades gracefully: in a browser that does not support it, text simply wraps around the element's rectangular box instead.
Related properties
float— required forshape-outsideto take effect.border-radius— rounds the<shape-box>value's corners, whichshape-outsidewill then follow.