Does shape-outside change the element's size?

No. It changes where inline content may flow around the element, while width, height, background and border are unaffected. That is why an invisible box can still steer the paragraph.

What happens in a browser without shape-outside support?

The text wraps to the float's rectangle, which is the layout the page had before shapes existed. The generated at-supports block records that fallback for the stylesheet.

Why is the float box square even for the ellipse?

The presets keep one size for the box so the control stays simple. The ellipse is drawn inside that square, so widening it is a stylesheet edit rather than a slider move.

Can I use an image instead of a coloured box?

Yes. The shape is independent of what the float contains, so the same declarations wrap copy around an image once the image replaces the tinted preview box.

How much shape-margin is enough?

Enough that no line visibly touches the contour. Around one rem is a common starting point, and the readout converts the value to pixels so the clearance is concrete.

Text Box Shape Wrapper

Shape

Text faceshape-outsideFloat side

Float boxpx

shape-marginrem

Text sizepx

Paragraph

Shape functioncircle(50% at 50% 50%)

Clearance20px beyond the shape

Without shape-outside supporttext wraps to the float's rectangular box

Wrapped text

Wrapping text around a shape is the modern equivalent of setting type around a woodcut: the words follow the contour of the object rather than the edge of the column. CSS does this with shape-outside on a floated element, and the shape is described by a circle, an ellipse, an inset box or a polygon.

shape-outside affects only the text flow — the background, border and layout of the float are unchanged, which is why the box can be invisible while the text still follows its contour.

css output

.shape-wrap { font-family: 'Inter', sans-serif; font-size: 1.0000rem; line-height: 1.6; }

.shape-wrap > .shape {
  float: left;
  width: 180px;
  height: 180px;
  shape-outside: circle(50% at 50% 50%);
  shape-margin: 1.25rem;
  margin-right: 0.5rem;
  background: var(--muted);
}

@supports (shape-outside: circle(50%)) {
  /* shapes only exist in engines that support them; the float alone is the fallback */
}

You Might Also Need

Text Column Layout Builder

Build multi-column text

Optical Margin Alignment Preview

Preview optical alignment

Drop Cap Generator

Generate elegant drop caps

Paragraph Width Optimizer

Optimize characters per line

The text box shape wrapper builds the two declarations that wrap body copy around a shape: a float that reserves the block, and a shape-outside value that decides where the text may enter. You choose the face, one of four shapes, the float side, the size of the float box, the shape-margin and the text size, and the panel reports the resolved shape function, the clearance beyond the contour and the fallback behaviour.

What is Text Box Shape Wrapper?

The text box shape wrapper turns a shape choice into a working wrap. The controls are the text face, the shape function, the float side, the size of the float box, the shape-margin and the text size, and the preview shows body copy flowing around a tinted box so the contour can be judged directly. The generated rule keeps the float and the shape in one block, and a second output documents what happens in an engine that does not support shape-outside.

Shapes: circle(50% at 50% 50%), ellipse(45% 55% at 50% 50%), inset(6% 8% 10% 4% round 12px) and a triangle polygon whose points are 0% 0%, 100% 0% and 50% 100%.
A no-shape option that leaves a rectangular float, which is the fallback every other choice degrades to.
Float side of left or right, with half a rem of margin on the opposite side.
Float box from 60px to 420px, square for every shape.
shape-margin from 0 to 4rem in five-hundredth steps, defaulting to 1.25rem.
Text size from 12px to 22px, with Inter as the default face.
Readouts: the resolved shape function, the clearance converted to pixels and the statement that an unsupported engine wraps text to the float's rectangle.

shape-outside changes where inline content may flow; it does not change the element's background, border or box model, which is why a transparent float can still steer a paragraph. The generated block carries the float and the shape together, and the at-supports note records the fallback rather than pretending it away. The support test asks specifically for shape-outside: circle(50%), so an engine that cannot parse that function takes the fallback path. The clearance readout multiplies the shape-margin into pixels, because the value is authored in rem but the gap it creates is physical. The preview tints the float so the contour is visible, and that tint is a preview convenience: in production the same element is usually invisible and the wrapped copy is the only evidence of its outline.

The shape governs text flow only; the float's size, background and position are separate decisions.
The polygon preset is a single triangle rather than an editable point list.
The float box is square, so an ellipse is drawn inside a square and reaches the same height as a circle.
The element must be floated; a grid or flex-positioned box does not create the same wrap.
At very small text sizes the line height is short relative to the contour, and the wrap can look stepped rather than smooth.

Use it when an article carries a portrait, a diagram or a decorative block and the copy should follow its outline instead of running past it. Keep the shape-margin generous, because a contour the text touches reads as an accident while a visible clearance reads as a decision. When the wrap belongs to an opening letter rather than an image, the drop cap generator covers that construction, and the optical margin alignment preview is where the text edge itself is checked for a small glyph-level hang.

How to use Text Box Shape Wrapper

Pick the text face and choose the shape the copy should follow.
Set the float side and the size of the float box.
Adjust the shape-margin until the clearance reads comfortably, then set the text size.
Paste the copy and copy the generated rule, keeping the at-supports note as the fallback documentation.

When to use Text Box Shape Wrapper vs related tools

Use it when an image or a decorative block should have copy around its contour rather than beside it: a portrait in a profile, a diagram in a technical piece, a circular badge in a landing page. The shape-margin is the control that turns a tight wrap into a deliberate one. When the contour is an opening letter, the construction belongs to the drop cap generator, and a lifted quotation is the pull quote designer's job. The text edge itself, including glyph-level hangs, is what the optical margin alignment preview checks, and the broader measure around the shape is set by the text column layout builder.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.