CSS Shapes and Exclusions

Intermediate

CSS Shapes changes the geometry available to nearby inline content without changing the document order. The core stable authoring model is shape-outside, which lets a box expose a non-rectangular float shape so inline content can wrap around that shape instead of the float box rectangle.

This lesson is the primary Foxipa owner for CSS Shapes and the practical boundary of CSS Exclusions: shape geometry used for text wrapping, shape-outside, shape-margin, shape-image-threshold, the shape functions and image-derived shapes they accept, and the distinction between a shape that influences wrapping and a shape used only for painting or clipping.

The central model

A CSS shape is a geometric boundary used to determine where inline content may flow. It is not a new box, does not replace the float, and does not rewrite the document structure.

?

Shapes do not replace floats

The stable CSS Shapes Level 1 model is built around floated boxes. The float still participates in the flow according to Flow Layout; shape-outside changes the region that inline content must avoid around that float.

?

The shape reference box

Shape geometry is resolved against a reference box associated with the float. The shape can therefore describe a boundary that is different from the simple rectangular area suggested by the element’s outer box.

Do not confuse the shape reference geometry with border painting, clipping, or the visual pixels of an image. A wrapping shape is a layout input; a clipping path is a painting/visibility operation owned elsewhere.

?

Basic shape functions

CSS Shapes accepts basic shape functions such as circle(), ellipse(), inset(), polygon(), and related geometry defined by the CSS Shapes value model. The function describes a boundary; the browser uses that boundary when determining the available inline region around the float.

?

?

Newer shape functions in the current draft

The current CSS Shapes Level 1 Editor's Draft expands the basic-shape value model with functions including path(), rect(), xywh(), and shape(). These are useful when a wrapping boundary needs more precise or programmable geometry than the older circle(), ellipse(), inset(), and polygon() forms. They are current draft material, so Foxipa treats them as developing rather than implying universal stable support.

?

The shape-outside property

shape-outside establishes the shape used for wrapping inline content around a float. Its value may describe a basic shape, use a reference box, or derive geometry from an image depending on the supported value form.

?

Shape margin

shape-margin expands the effective wrapping region outward from the shape. It creates breathing room between the shape boundary and nearby inline content without changing the float’s own box dimensions.

?

This distinction matters: ordinary margin belongs to the box model and changes spacing around the float box. shape-margin changes the wrapping boundary generated from the shape.

?

Image-derived shapes

CSS Shapes can derive a wrapping shape from an image. This is useful when the visible subject of an image is not rectangular. The image itself remains an image-value concern owned by Images/Gradients/Replaced Content; Shapes owns how alpha-derived geometry can influence wrapping.

?

shape-image-threshold

shape-image-threshold controls which image alpha values contribute when an image is used to define a shape. A threshold changes the boundary extracted from the image; it does not recolor or clip the image itself.

?

Shape geometry is not painting

A shape may resemble a visible outline, but CSS does not paint the shape boundary merely because shape-outside is set. The property supplies geometry to wrapping. If you need visible clipping, use the separate clipping/masking model, which is covered by the Masking, Clipping, Compositing, and Blending owner.

?

Shapes and text layout

Once a shape establishes the available inline region, Text Layout still determines whitespace processing, line breaking, justification, and other text behavior. Shapes does not become a second text-formatting engine.

?

Shapes and writing modes

Shape coordinates and the meaning of block/inline directions interact with the writing mode of the containing context. Writing Modes owns the definition of those axes; this lesson uses that model rather than redefining physical and logical directions.

?

Shapes and overflow

A wrapping shape does not make overflow disappear. Overflow Layout owns clipping and scrollable overflow. If content extends outside a box, do not use shape-outside as an overflow-control mechanism.

?

Multiple floats and overlapping shapes

More than one float can contribute wrapping constraints. Each float has its own box and shape; the available inline region is determined by the combined layout constraints rather than by a single global shape.

?

Shape margins and box margins are independent

When debugging a shape, inspect the float’s box margin and shape-margin separately. A surprising gap can come from either source, and changing one does not conceptually change the other.

?

The shape must be useful for wrapping

A shape is only useful when the surrounding inline content has an opportunity to wrap around the float. If the layout context does not produce the relevant float/inline interaction, changing shape-outside may appear to do nothing. That is a layout-context issue, not evidence that the shape value is invalid.

?

The Exclusions boundary

CSS Exclusions was designed to generalize the idea of an exclusion area so content could wrap around shaped boxes beyond the traditional float model. The W3C CSS Working Group publication describes properties for assigning shapes and controlling how text in other boxes wraps around them, including absolutely positioned exclusions.

?

Shapes versus masking and clipping

A shape answers “where may inline content flow?” Masking or clipping answers “which painted pixels remain visible?” The geometries can sometimes look alike, but the questions are different and belong to different stages of CSS processing.

?

Developing and deferred shape features

CSS Shapes Level 1 is the stable curriculum foundation. Newer Shapes/Exclusions work should be treated according to its current specification status and implementation maturity rather than presented as if every draft feature were a universal CSS feature.

The property index currently identifies shape-outside, shape-margin, and shape-image-threshold with CSS Shapes Level 1, while shape-inside appears in a different historical/draft context. This curriculum therefore does not promote shape-inside into the same stable lesson core.

?

Debugging shapes systematically

Start with the float: confirm that it is actually floating and that inline content can wrap beside it. Then inspect shape-outside, the shape reference box, shape-margin, and any image threshold. Finally inspect Flow, Text, Writing Modes, and Overflow rather than assuming every mismatch is a shape bug.

?

A decision tree for ownership

If you need a non-rectangular region for inline text to wrap around a float, start with CSS Shapes. If you need float participation, inspect Flow Layout. If you need text processing or line breaking, inspect Text Layout. If you need image-value or intrinsic-size behavior, inspect Images. If you need clipping or compositing of painted output, use the Masking/Clipping/Compositing/Blending owner. If you are considering historical Exclusions properties, treat them as a specification-status question rather than a second stable curriculum path.

?

Final ownership summary

CSS Shapes owns the geometry that changes how inline content wraps around floated boxes. It does not own float creation, line breaking, image sizing, overflow clipping, painting, or imperative APIs. Keeping those boundaries explicit prevents the curriculum from repeating the same concept under different property names.

Quick comparison: what changes what?

?

?

?