No Login Data Private Local Save

shape‑outside Circle Text Wrap - Online Generator

22
0
0
0
Live Preview
⌀ 200px float: left

Shape-outside is a powerful CSS property that allows text to flow around non-rectangular shapes, creating stunning magazine-style layouts on the web. Instead of boring rectangular text wraps, you can make your content dance around circles, ellipses, polygons, and even images with alpha transparency. This demo showcases a circular text wrap using shape-outside: circle(). The circle's radius, position, and margin can all be fine-tuned to achieve the exact look you want. Whether you're designing a feature article, a creative landing page, or just want to add some visual flair to your blog posts, shape-outside opens up a world of possibilities that were once only available in print design software like InDesign or QuarkXPress. Play with the controls on the right to see how each parameter affects the text flow around the floating circle element.

Controls
80px380px
20%80%
Percentage relative to element size. Values >50% extend beyond element bounds.
0% (left)100% (right)
0% (top)100% (bottom)
0px60px
Extra spacing between text and the shape boundary.
11px22px
/* Shape-Outside Circle Text Wrap */ .shape-circle { float: left; width: 200px; height: 200px; shape-outside: circle(50% at 50% 50%); shape-margin: 15px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
Frequently Asked Questions
What is CSS shape-outside?
shape-outside is a CSS property that defines a shape around which adjacent inline content (text) should wrap. Instead of the default rectangular bounding box of a floated element, shape-outside allows text to flow around circles, ellipses, polygons, or even the alpha channel of an image. It only works on floated elements and is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
What does circle() accept as parameters?
The circle() function accepts up to two arguments: a radius and an optional position (using at).
Example: circle(50% at 50% 50%)
• Radius: Can be a length (px, em) or percentage. Default is closest-side.
• Position: Specifies the circle center using the at keyword followed by X and Y coordinates. Default is at 50% 50% (center of the element's box).
Percentages for position are relative to the element's width (X) and height (Y).
Does shape-outside work without float?
No. shape-outside only applies to floated elements (float: left or float: right). Without a float, the property has no effect. This is because shape-outside modifies how inline content wraps around the float area of an element. If you need text wrapping around shapes without floats, consider using shape-inside (though browser support is still limited as of 2025).
What's the difference between shape-outside and clip-path?
shape-outside controls how other content flows around an element, while clip-path controls the visible area of the element itself. They're often used together: clip-path visually crops the element into a shape, and shape-outside makes surrounding text respect that same shape. For circles, you can also simply use border-radius: 50% for the visual appearance and shape-outside for the text wrap.
What is shape-margin used for?
shape-margin adds extra space between the shape boundary and the wrapping text. It's like adding padding to the shape itself. A positive value (e.g., shape-margin: 20px) pushes text further away, creating a more open, airy layout. A value of 0 makes text hug the shape tightly. Negative values are not permitted. It accepts length units (px, em, rem) and percentages.
Is shape-outside supported in all browsers?
Yes, in all modern browsers. shape-outside has excellent support across Chrome (37+), Firefox (62+), Safari (10.1+), and Edge (79+). Internet Explorer does not support it. For IE11 and below, text will simply wrap around the rectangular float box as a graceful fallback. According to Can I Use, global support is over 96% as of 2025, making it safe for production use in most projects.
🔧 Related Tools