CSS Shapes
Picture a magazine article where the text elegantly wraps around a circular photo instead of just stopping at a rectangular box. That flowing, custom-shaped wrap is exactly what the CSS Shapes module makes possible on the web.
Normally, floated content wraps in a plain rectangle, no matter what shape the floated element visually is. The shape-outside property changes that: it defines a custom geometry, like a circle or a polygon, that surrounding inline content (mostly text) flows around instead.
This is a subtle but genuinely delightful effect for editorial-style layouts on a site like cookiescursor.com, giving text columns a more organic, magazine-like feel.
In this page:
Syntax
selector {
float: left;
shape-outside: circle() | ellipse() | polygon(points);
}What Is CSS Shapes?
The CSS Shapes module lets floated content influence the wrap of surrounding inline content using a custom geometric shape, instead of the plain rectangular wrap browsers use by default.
Note:
- Shapes are a great fit for editorial or article layouts on cookiescursor.com where a photo or icon should feel integrated into the flow of text.
- Accepted values:
- circle() — circular float shape
- ellipse() — elliptical shape
- inset() — rectangle with optional rounded corners
- polygon() — custom shape from coordinate pairs
- url() — shape from an image's alpha channel
- margin-box | border-box | padding-box | content-box — reference box keywords
- none — rectangular float area (default)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
shape-outside has no visible effect unless the element it's applied to is also floated.
Example: What Is CSS Shapes?
<style>
img {
float: left;
shape-outside: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Text wraps around a custom shape, not a plain rectangle</p>shape-outside with Basic Shapes
shape-outside accepts basic shape functions like circle(), ellipse(), and polygon(), each defining the wrap boundary with the same syntax used by clip-path. Each shape function accepts the same coordinate syntax whether it's used for shape-outside or for clipping with clip-path.
Note:
- If you already know clip-path's basic shape syntax, shape-outside uses the exact same functions, so the skills transfer directly.
- Accepted values:
- shape-outside: none — default, text wraps the box
- shape-outside: circle() | ellipse() | polygon() | inset() — basic shapes
- shape-outside: url(image.png) — uses the image alpha
- shape-outside: margin-box | border-box | padding-box | content-box — box keywords
- note: needs float
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
A shape and its element's visible appearance are two separate things; shape-outside doesn't clip anything visually on its own.
Example: shape-outside with Basic Shapes
<style>
.icon {
float: left;
width: 150px;
height: 150px;
background: coral;
shape-outside: polygon(0 0, 100% 0, 0 100%);
}
</style>
<div class="icon"></div>
<p>Wraps around the polygon boundary</p>shape-margin
shape-margin adds space between the shape's edge and the content wrapping around it, similar in spirit to how ordinary margin adds space around a regular box. Without shape-margin, wrapped text can end up crammed right against the edge of the shape with no breathing room.
Note:
- A small shape-margin, around 8px to 16px, usually keeps wrapped text from feeling too tightly hugged against a curved edge.
- Accepted values:
- shape-margin: 0 — default
- shape-margin: <length> — extra distance from the shape
- shape-margin: <percentage> — relative to the container width
- note: works with shape-outside on a float
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
shape-margin only affects the wrap distance, it doesn't change the shape's own size or position.
Example: shape-margin
<style>
img {
float: left;
shape-outside: circle(50%);
shape-margin: 16px;
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Extra breathing room between the shape and the wrapped text</p>Wrapping Text Around a Circle
A circular shape-outside is one of the most common uses of CSS Shapes, giving a rounded photo or icon a natural text wrap that plain floats can't achieve on their own. Combined with float, this creates a visually striking layout that's difficult to achieve with a plain rectangular box.
Note:
- Pair shape-outside: circle(50%) with a matching border-radius: 50% so the visual shape and the wrap shape line up perfectly.
- Accepted values:
- shape-outside: circle(50%) — circular text wrap
- float: left | right — required for shape-outside
- border-radius: 50% — makes the box look circular too
- width and height — must be defined on the float
Warning:
If the shape and the visible element don't match (like a square image with a circular shape-outside), text will wrap around invisible empty space.
Example: Wrapping Text Around a Circle
<style>
img {
float: left;
shape-outside: circle(50%);
border-radius: 50%;
width: 150px;
height: 150px;
}
</style>
<img src="https://placehold.co/150x150" alt="Round photo">
<p>Text wraps around the round photo naturally</p>shape-outside with an Image
shape-outside can also derive its shape directly from an image's alpha channel, meaning the wrap follows the actual transparent and opaque areas of a PNG, rather than a hand-written shape function.
Note:
- Image-based shapes work best with images that have a genuinely transparent background around an irregular subject, like a logo or icon cutout.
- Accepted values:
- shape-outside: url(<image>) — uses the image's alpha channel
- shape-image-threshold: <number> — alpha cutoff, default 0
- float: left | right — required
- note: image must be CORS-accessible
Warning:
Image-derived shapes require the image to load successfully first; until then, the browser falls back to a plain rectangular wrap.
Example: shape-outside with an Image
<style>
img {
float: left;
width: 150px;
height: 150px;
shape-outside: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Ccircle cx=%2775%27 cy=%2775%27 r=%2775%27 fill=%27%23e53935%27/%3E%3C/svg%3E");
shape-margin: 12px;
}
</style>
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Ccircle cx=%2775%27 cy=%2775%27 r=%2775%27 fill=%27%23e53935%27/%3E%3C/svg%3E" alt="A solid red circle">
<p>The text wraps around the circle's actual opaque pixels, not the image's rectangular box. Resize the window to see the wrap reflow.</p>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Expecting shape-outside to work without float set on the same element, it only has an effect on floated elements.
- Confusing shape-outside (which affects how text wraps) with clip-path (which affects what's visually rendered).
- Forgetting shape-margin, which leaves wrapped text sitting uncomfortably close to the shape's edge.
Chapter Summary
- shape-outside changes how inline content wraps around a floated element, using a custom shape instead of a plain rectangle.
- Basic shapes like circle(), ellipse(), and polygon() define the wrap geometry directly in CSS.
- shape-margin adds breathing room between the shape's edge and the text wrapping around it.
Browser Support
CSS Shapes with basic shape functions are supported by all modern browsers.
🔒
Chapter Quiz — Complete all 22 topics to unlock
0/22 topics done
Complete these topics first:
- CSS Gradients
- CSS Shadows
- CSS Filters
- CSS Blend Modes
- CSS Transforms
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Image Styling
- CSS Image Effects
- CSS Hover Overlays
- CSS Image Modal
- CSS Image Centering
- CSS Image Shapes
- CSS Buttons
- CSS Columns
- CSS Clip Path
- CSS Shapes
- CSS Scroll Snap
- CSS Architecture: BEM
- CSS Custom Properties