1. Introduction
This section is not normative.
Level 1 of this specification defined properties to control the geometry of an element’s float area. This level defines how shapes apply to exclusions. It also includes a shape-inside property for applying a shape to an element’s content area. And finally it defines new ways of specifying shapes for all of these applications.
2. Terminology
The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the border box for an exclusion box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular exclusion areas. The shape-inside property also defines an exclusion area, but in this case it is the area outside the shape that inline content avoids.
The area used for wrapping content around a float element. By default, the float area is the float element’s margin box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular float areas.
Content area
The content area is normally used for layout of the inline flow content of a box.
shrink-to-fit circle / shape
3. Shapes
Shapes define arbitrary geometric contours around which inline content flows. The shape-outside property defines the float area for a float, and the exclusion area for an exclusion.
4. Basic Shapes
Add the final level 1 section.
4.1. Supported Shapes
Add the final level 1 section, with the following integrated.
-
path() = path( [<fill-rule>,]? <string> )
-
- <fill-rule> - The filling rule used to determine the interior of the path. See fill-rule property in SVG for details. Possible values are nonzero or evenodd. Default value when omitted is nonzero.
- The <string> represents an SVG Path data string. The path data string must be conform to the grammar and parsing rules of SVG 1.1. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1.
Should we revisit the decision to not allow SVG path syntax in the shape-inside, shape-outside properties
5. Referencing SVG shapes
An SVG shape can be referenced using the url()
syntax.
The shape can be any
of the SVG basic shapes or a path element.

<style>
div {
height: 400px;
width: 400px;
}
.in-a-circle {
shape-outside: url(#circle_shape);
}
.in-a-path {
shape-outside: url(#path-shape);
}
</style>
<svg ...>
<circle id="circle_shape" cx="50%" cy="50%" r="50%" />
<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>
<div class="around-a-circle">...</div>
<div class="around-a-path">...</div>
6. Shapes from Image
Add the final level 1 section.
One suggestion is to define a shape based on an element’s rendered content. This could have security implications.
Another suggestion is to add something to an image() function that determines the relevant pixels to use (both for defining a shape and for display).
7. Shapes from Box Values
Add the final level 1 section.
8. Declaring Shapes
A shape can be declared with the shape-outside property, with possible modifications from the shape-margin property. The shape defined by the shape-outside and shape-margin properties changes the geometry of a float element’s float area and an exclusion element’s exclusion area.
A shape can be declared with the shape-inside property, with possible modifications from the shape-padding property. The shape defined by the shape-inside and shape-padding properties defines an exclusion area that contributes to the element’s wrapping context. The shape-inside property applies to all block-level elements.
The red box illustrates an exclusion element’s content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).
<style type="text/css">
.exclusion {
wrap-flow: both;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
shape-outside: circle(50% at 50% 50%);
border: 1px solid red;
}
</style>
<div style=”position: relative;”>
<div class=”exclusion”></div>
Lorem ipsum dolor sit amet...
</div>
8.1. The shape-outside Property
Add the final level 1 section with the change that shape-outside applies to block-level elements and has an effect if the element is an exclusion.
8.2. The shape-inside Property
The shape-inside property adds one or more exclusion areas to the element’s wrapping context. This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element’s content area. Any part of the shape outside the element’s content area has no effect.
Name: | shape-inside |
---|---|
Value: | auto | outside-shape | [ <basic-shape> || shape-box ] | <image> | display |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | n/a |
Computed value: | computed lengths for <basic-shape>, the absolute URI for <uri>, otherwise as specified |
Canonical order: | per grammar |
Animation type: | as defined for <basic-shape>, otherwise discrete |
The values of this property have the following meanings:
- auto
- The shape is computed based on the content box of the element.
- outside-shape
- The shape is computed based on the shape defined by the shape-outside and shape-margin properties.
- <basic-shape>
- The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon().
- <uri>
-
If the <uri> references an SVG shape element,
that element defines the shape.
Otherwise, if the <uri> references an image,
the shape is extracted and computed
based on the alpha channel
of the specified image.
If the <uri> does not reference an SVG shape element or an image, the effect is as if the value auto had been specified.
- display
- The shape is computed based on the shape of the display as described in css-round-display.
The shape-inside property applies to floats.
The shape-inside property may not apply on some elements such as elements with a computed display value of table.

Effect of shape-inside on inline content.
Overflow content avoids the exclusion area(s) added by shape-inside and shape-padding (as well as any other exclusion areas in the element’s wrapping context). In other words, overflow continues outside the rectangular bounds of the element.
improve the illustration above, using text to show overflow instead of greeked boxes.
When a shape-inside has a definite size (no percentages used in the shape’s definition) an auto-sized element should use the shape as a constraint in determining its maximum size.
8.3. The shape-image-threshold Property
Add the final level 1 section with the change that it applies to both shape-inside and shape-outside.
8.4. The shape-image-source-type Property
Should we add an alpha/luminance switch to determine which values we use from the shape-image source? This could just be a keyword on the shape-image-threshold property. Whatever we go with should be compatible with the alpha/luminance switch from mask sources.
8.5. The shape-margin property
Add the final level 1 section with the change that it applies to exclusions.
8.6. The shape-padding Property
The shape-padding property adds padding to a shape-inside. This defines a new shape where every point is the specified distance from the shape-inside. This property takes on positive values only.
Name: | shape-padding |
---|---|
Value: | <length> |
Initial: | none |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | n/a |
Computed value: | the absolute length |
Canonical order: | per grammar |
Animation type: | by computed value |
A shape-padding creating an offset from a circlular shape-inside. The light blue rectangles represent inline content affected by the shape created by the padding.

Note: The shape-padding property only affects layout of content inside the element it applies to while the shape-margin property only affects layout of content outside the element.