CSS Shapes Module Level 1
CSS Shapes Module Level 1
Editor’s Draft
16 October 2025
More details about this document
This version:
Latest published version:
Previous Versions:
Implementation Report:
Feedback:
CSSWG Issues Repository
Editors:
Rossen Atanassov
Microsoft Corporation
Alan Stearns
Adobe
Noam Rosenthal
Google
Former Editor:
Vincent Hardy
Suggest an Edit for this Spec:
GitHub Editor
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to
wrap
around the circle shape instead of the float’s bounding box.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-shapes” in the title, like this:
“[css-shapes]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
This section is not normative.
Shapes define arbitrary geometries
that can be used as CSS values.
This specification defines properties
to control the geometry
of an element’s
float area
The
shape-outside
property uses shape values
to define the
float area
for a float.
Note:
Future levels of CSS Shapes will allow use of shapes
on elements other than floats.
Other CSS modules can make use of shapes as well,
such as CSS Masking
[CSS-MASKING]
and CSS Exclusions
[CSS3-EXCLUSIONS]
Note:
If a user agent implements both CSS Shapes
and CSS Exclusions,
the
shape-outside
property defines
the exclusion area for an exclusion.
Note:
A future level of CSS Shapes will define a shape-inside property,
which will define a shape to
wrap
content within the element.
1.1.
Module Interactions
This module extends the float features defined in
[CSS2]
chapter 9.
1.2.
Values
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
1.3.
Terminology
Wrap
This specification uses the term
wrap
to refer to flowing content
around the sides of a
float area
defined in
[CSS2]
chapter 9.
Content
wraps
around the right side
of a left-floated box,
and content
wraps
around the left side
of a right-floated box.
One result of this
wrapping
is that line boxes next to a float
are shortened as necessary
to avoid intersections with the
float area
Float area
The area used
for
wrapping
content
around a float element.
The rules for float behavior
use the sides of the
float area
to determine where content flows.
By default,
the
float area
is the float element’s
margin box
(note this can be different than
the
float area
produced
by the
margin-box
value,
which includes border-radius curvature).
This specification’s
shape-outside
and
shape-margin
properties
can be used to define an arbitrary,
non-rectangular
float area
direction-agnostic size
The
direction-agnostic size
of a box is equal to the length of the diagonal of the box,
divided by sqrt(2).
Note:
This is a method of averaging the width and height of a box
used by SVG in some cases,
when a percentage of a box’s size is desired
but the context doesn’t specifically favor the width or the height.
For square boxes, this is the same as the width/height.
2.
Relation to the box model and float behavior
While the boundaries used
for
wrapping
inline flow content
outside a float
can be defined using shapes,
the actual box model does not change.
If the element has specified
margins, borders or padding
they will be computed and rendered
according to the
[CSS3BOX]
module.
Also, float positioning and stacking are not affected
by defining a
float area
with a shape.
When a shape is used to define
float area
the shape is clipped
to the float’s margin box.
In other words,
a shape can only ever reduce
float area
not increase it.
A reduced
float area
may have no effect
on some line boxes
that would normally be affected by the float.
If a shape does not enclose any area,
the shape’s edges are still used
to define the
float area
float area
defined by a shape
may reduce the normal
float area
on all sides,
but this does not allow content to
wrap
on both sides of a float.
Left floats with a
shape-outside
still
only allow content
wrapping
on the right side,
and right floats only allow
wrapping
on the left.
In the following example
the left and right floating
img
elements
specify a triangular shape
using the
shape-outside
property.
Sometimes a web page's text content appears to be
funneling your attention towards a spot on the page
to drive you to follow a particular link. Sometimes
you don't notice.
Since shapes are clipped to the float’s margin box,
adding this shape to the left float above
would result in the same rendering.
shape-outside: polygon(0 0, 500% 500%, 0 500%);
A shape that does not enclose any area
still has edges that contribute to the
float area
This inset shape is a vertical line positioned
at the midpoint of the reference box.
This midpoint edge is used as the edge
of the float area for wrapping content.
shape-outside: inset(0% 50% 0% 50%);
If inset values add up to more than the width,
CSS Backgrounds 3
§ 4.5 Overlapping Curves
rules are used to determine
the edges of the rectangle.
This shape results in a vertical edge
25% from the left side of the reference box.
shape-outside: inset(0% 150% 50% 0%);
If the shape is only a horizontal line,
then it is an empty float area and has no effect on wrapping.
Note that in this example shape-margin must be 0px
(otherwise the line would expand to enclose an area).
shape-outside: inset(50% 0% 0% 50%);
shape-margin: 0px;
shape-outside
can create open areas
on both the left and right
of a
float area
Content still
wraps
only on one side
of a float in this case.
In the picture,
the shape is rendered in blue,
and the content area outside the shape in mauve.
shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);
The following styling creates
a shape much smaller than
the float’s content area,
and adds a margin-top to the float.
In the picture,
the shape is rendered in blue,
the content area outside the shape in mauve,
and the margin area of the float box in yellow.
The inline content only
wraps
around the shape,
and otherwise overlays the rest
of the float margin box.
.float-left {
shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
float: left;
width: 100px;
height: 100px;
margin-top: 20px;
The next picture shows a possible result
if two of these floats
were stacked next to each other.
Note that the floats are positioned
using their margin boxes,
not the
float area
3.
Basic Shapes
The
type
can be specified using basic shape functions.
When using this syntax
to define shapes,
the
reference box
is defined
by each property that uses
values.
The coordinate system for the shape
has its origin on the top-left corner of the
reference box
with the x-axis
running to the right
and the y-axis running downwards.
All the lengths expressed in percentages
are resolved from the used dimensions
of the
reference box
3.1.
Supported Shapes
The
functions are:
= inset(
{1,4}
[ round
<'border-radius'>
= xywh(
{2}
{2}
[ round
<'border-radius'>
= rect(
auto ]
{4}
[ round
<'border-radius'>
= circle(
[ at
= ellipse(
[ at
= polygon(
<'fill-rule'>
[ round
= path(
<'fill-rule'>
= shape(
<'fill-rule'>
from
inset()
Defines an inset rectangle
via insets from each edge of the
reference box
If less than four
values are provided,
the omitted values default in the same way as the
margin
shorthand:
an omitted second or third value defaults to the first,
and an omitted fourth value defaults to the second.
The four
define the position of the top, right, bottom, and left edges of a rectangle,
respectively,
as insets from the corresponding edges of the
reference box
A pair of insets in either dimension
that add up to more than the used dimension
(such as left and right insets of 75% apiece)
use the
CSS Backgrounds 3
§ 4.5 Overlapping Curves
rules
to proportionally reduce the inset effect to 100%.
For example, specifying
inset(75% 0 50% 0)
has the top+bottom edges summing to 125%
of the
reference box’s
height.
They’re proportionally reduced to sum to 100%,
identical to specifying
inset(60% 0 40% 0)
The optional
<'border-radius'>
argument(s)
define rounded corners for the rectangle
using the
border-radius
shorthand syntax.
Tests
inset-function-computed.html
(live test)
(source)
inset-function-invalid.html
(live test)
(source)
inset-function-valid.html
(live test)
(source)
xywh()
Defines a rectangle
via offsets from the top and left edge of the
reference box
and a specified width and height.
The four
s define,
respectively,
the inset from the left edge of the
reference box
the inset from the top edge of the
reference box
the width of the rectangle,
and the height of the rectangle.
Note:
This syntax is inspired by the
viewBox
attribute from SVG.
The optional
<'border-radius'>
argument(s)
define rounded corners for the inset rectangle
using the
border-radius
shorthand syntax.
Tests
xywh-function-computed.html
(live test)
(source)
xywh-function-invalid.html
(live test)
(source)
xywh-function-valid.html
(live test)
(source)
rect()
Defines a rectangle
via insets from the top and left edges of the
reference box
The four
define the position of the top, right, bottom, and left edges of a rectangle,
respectively,
as insets from the top edge of the
reference box
(for the first and third values)
or the left edge of the
reference box
(for the second and fourth values).
An
auto
value makes the edge of the box
coincide with the corresponding edge of the
reference box
it’s equivalent to
0%
as the first (top) or fourth (left) value,
and equivalent to
100%
as the second (right) or third (bottom) value.
The second (right) and third (bottom) values are floored
by the fourth (left) and second (top) values, respectively.
For example, specifying
rect(10px 0 0 20px)
would place the bottom edge higher than the top edge,
and the right edge further left than the left edge,
so both are corrected to not cross over the other edge,
identical to specifying
rect(10px 20px 10px 20px)
Note:
This syntax is similar,
but not quite identical,
to the legacy
rect()
function
used solely by the
clip
property.
The optional
<'border-radius'>
argument(s)
define rounded corners for the rectangle
using the
border-radius
shorthand syntax.)
Tests
rect-function-computed.html
(live test)
(source)
rect-function-invalid.html
(live test)
(source)
rect-function-valid.html
(live test)
(source)
circle()
The
argument defines
the circle’s radius.
Rather than referring to the
gradient box
values are resolved against the
reference box
Two
values are invalid.
If omitted it defaults to
closest-side
The
argument defines
the center of the circle.
Unless otherwise specified,
this defaults to
center
if omitted.
Tests
circle-function-computed.html
(live test)
(source)
circle-function-invalid.html
(live test)
(source)
circle-function-valid.html
(live test)
(source)
ellipse()
The
argument defines
the horizontal and vertical radiuses of the ellipse.
Rather than referring to the
gradient box
values are resolved against the
reference box
If omitted it defaults to
closest-side
The
argument defines
the center of the ellipse.
Unless otherwise specified,
this defaults to
center
if omitted.
Tests
ellipse-function-computed.html
(live test)
(source)
ellipse-function-invalid.html
(live test)
(source)
ellipse-function-valid.html
(live test)
(source)
polygon()
The
<'fill-rule'>
specifies the filling rule used
to determine the interior.
Defaults to
nonzero
if omitted.
An optional
after a
round
keyword
defines rounding for each vertex of the polygon.
The length is the radius of a circle
whose center lies on the bisector
of the smaller angle of the vertex,
and that is tangential
to both sides of the vertex.
Rounding polygon vertices that are both convex and concave.
To avoid rounding more
than half of any line segment,
the rounding of each vertex
must be clamped separately
such that the radius is never more than
the smaller of
tan(angle/2) segment / 2
evaluated against both vertex line segments.
This diagram shows the intent of the clamping formula.
Each
pair
specifies a vertex of the polygon,
as a horizontal and vertical offset
from the left and top edges of the
reference box
The UA must close a polygon
by connecting the last vertex
with the first vertex of the list.
Tests
polygon-function-computed.html
(live test)
(source)
polygon-function-invalid.html
(live test)
(source)
polygon-function-valid.html
(live test)
(source)
path()
The
<'fill-rule'>
specifies the filling rule used
to determine the interior.
Defaults to
nonzero
if omitted,
unless the function is being used
in a context such as SVG shapes
where the
fill-rule
property is relevant.
In that case an omitted value will use
the computed value of the
fill-rule
property.
The
represents an
SVG Path data string
A path data string that does not conform to the
to the grammar and parsing rules of SVG 1.1,
or that does conform but defines an empty path,
is
invalid
and causes the entire
path()
to be
invalid
The initial position is defined
by the first “move to” argument
in the path string.
For the initial direction follow SVG 1.1.
The UA must close a path
with an implicit
closepath command ("z" or "Z")
if it is not present in the string
for properties that require a closed loop
(such as
shape-outside
and
clip-path
).
Tests
path-function-computed.html
(live test)
(source)
path-function-invalid.html
(live test)
(source)
path-function-valid.html
(live test)
(source)
shape()
See
The shape() function
Tests
shape-function-computed.html
(live test)
(source)
shape-function-invalid.html
(live test)
(source)
shape-function-valid.html
(live test)
(source)
3.1.1.
The
shape()
Function
While the
path()
function allows reuse of the SVG path syntax
to define more arbitrary shapes than allowed by more specialized shape functions,
it requires writing a path as a single string
(which is not compatible with, for example, building a path piecemeal with
var()
),
and inherits a number of limitations from SVG,
such as implicitly only allowing the
px
unit.
The
shape()
function uses a set of commands roughly equivalent to the ones used by
path()
but does so with more standard CSS syntax,
and allows the full range of CSS functionality,
such as additional units and math functions.
The commands used by
shape()
are dynamically turned into path segments when it is used for rendering,
e.g., when computing the rendered
clip-path
In that sense,
shape()
is a superset of
path()
. A
path()
can be easily converted to a
shape()
but to convert a
shape()
back to a
path()
or to SVG requires information about the CSS environment (e.g.
current values of CSS custom properties, current font size for
em
units, etc).
The
<'fill-rule'>
is interpreted identically to the same argument in
path()
The rest of the arguments define a list of path data commands,
identical to that of an
SVG Path
which the function represents.
The
from
represents the starting point for the first shape-command.
It adds an initial
absolute moveto
to the list of path data commands.
The sequence of
s represent
further
path data commands
Each command’s starting point is the previous command’s ending point.
close
= move
= line
= hline
[ to [
left
center
right
x-start
x-end ]
by
= vline
[ to [
top
center
bottom
y-start
y-end ]
by
= curve
[ [ to
with
[ /
[ by
with
[ /
] ]
= smooth
[ [ to
[ with
[ by
[ with
] ]
= arc
[ [ of
{1,2}
&&
&&
&&
[rotate
= [ to
by
= [
[ from [ start
end
origin ] ]
{2}
= cw
ccw
= large
small
{2}
Defines a pair of coordinates,
representing a rightward and downward offset, respectively,
from a specified reference point.
Percentages are resolved against the width or height, respectively,
of the
reference box
= [
to
by
Every command can be specified in "absolute" or "relative" coordinates,
determined by their
by
or
to
component.
to
indicates that any
s in the command
are relative to the top-left corner of the
reference box
while
by
indicates that the
are relative to the command’s starting point.
defines how
by
and
to
are interpreted for curve control points,
while
and
define how
by
and
to
are
interpreted for horizontal and vertical lines, respectively.
When
to
is used, the coordinates can be specified as
s instead of
s.
Note:
In either case,
values in
are always computed relative to the
reference box’s
size.
move
Adds a
moveto
command
to the list of path data commands,
with an ending point specified by the
This draws nothing,
and merely "moves the pen" for the next command.
Note:
This starts a new subpath,
for the purpose of the
close
command.
line
Adds a
lineto
command
to the list of path data commands,
with an ending point specified by the
This draws a straight line from the command’s starting point to its ending point.
= hline [ to [
| left | center | right | x-start | x-end ]
| by
Adds a horizontal
lineto
command
to the list of path data commands.
This is equivalent to a
line
command
with the
given as the horizontal component of the
Specifying the horizontal component of
instead of a
left
center
right
x-start
, or
x-end
),
would draw a line to that
, with the
’s vertical component remaining the same as the starting point.
= vline [ to [
| top | center | bottom | y-start | y-end ] | by
Adds a vertical
lineto
command
to the list of path data commands.
This is equivalent to a
line
command
with the
given as the vertical component of the
Specifying the horizontal component of
top
center
bottom
y-start
, or
y-end
instead of a
would draw a line to that
, with the
’s horizontal component remaining the same as the starting point.
curve
[ [ to
with
[ /
]? ]
| [ by
with
[ /
]? ] ]
Adds a Bézier curve command to the list of path data commands,
ending at the point specified by the
following the
to
keyword,
or the
following the
by
keyword, as specified by
The
with
component specifies control points for the curve:
if a single
or
is provided,
the command specifies a
quadratic curve
if two
s or
s are provided,
it specifies a
cubic curve
smooth
[ [ to
[with
]? ]
| [ by
[ with
]? ] ]
Adds a smooth Bézier curve command to the list of path data commands,
ending at the point specified by the
following the
to
keyword, or the
following the
by
keyword, as specified by
The
with
component specifies control points for the curve:
if it’s omitted,
the command specifies a
smooth quadratic curve
if it’s provided,
if specifies a
smooth cubic curve
Note:
smooth
command is equivalent to a
curve
command
with the first control point automatically specified
as the reflection of the previous curve’s second control point
around the starting point,
or as the starting point if the previous path data command wasn’t a curve.
This ensures G1 continuity with the previous command,
so the curve appears to smoothly continue from the previous command,
rather than possibly making a sudden direction change.
= [
Provides a control point to a quadratic or cubic Bézier curve.
[ from [ start | end | origin ] ]?
Provides a control point to a quadratic or cubic Bézier curve.
When a
from
keyword is specified followed by
start
end
, or
origin
the given
is relative to
the command’s starting point, the command’s end point, or the
reference box
, respectively.
If such component is not provided, the
is relative to the segment’s start.
arc
[of
{1,2}] &&
? &&
? && rotate
? ]
Add an
elliptical arc
command
to the list of path data commands,
ending at the
The
of
component specifies the size of the ellipse that the arc is taken from.
The first
provides the horizontal radius of the ellipse
and the second provides the vertical radius.
Like for
s,
values are resolved against the width or height of the
reference box
as appropriate.
If only one
is provided,
both radiuses use the provided value.
In that case,
values are resolved against the
direction-agnostic size
of the
reference box
(similar to the
circle()
function).
Note that SVG has
some specific error-handling for the ellipse radiuses
if the endpoint is the same as the starting point, the command does nothing
if either radius is zero, the command is equivalent to a
to the ending point
if either radius is negative, its absolute value is used instead
if the radiuses don’t describe an ellipse large enough
to intersect both the starting point and ending point
(after rotation by the specified
),
they are scaled up uniformly until the ellipse is just large enough to reach.
The ellipse described by the specified radiuses defaults to being axis-aligned,
but can be rotated by specifying an
Similar to the
rotate()
transform function,
positive angles specify a clockwise rotation,
and negative angles specify a counterclockwise rotation.
If omitted, this defaults to
0deg
The ending point, radiuses, and angle,
taken together,
usually define two possible ellipses
that intersect the starting point and ending point,
and each ellipse can be traced in either direction,
for a total of four possible arcs.
The
and
components specify which of these arcs is desired:
can be
cw
or
ccw
indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively,
must be chosen.
If omitted, this defaults to
ccw
Note:
In the SVG arc command,
cw
corresponds to the value 1 for the sweep flag, and
ccw
to the value 0.
can be
large
or
small
indicating that the larger or smaller, respectively, of the two possible arcs
must be chosen.
If omitted, this defaults to
small
Note:
In the SVG arc command,
large
corresponds to the value 1 for the large flag, and
small
to the 0.
Note:
If the starting and ending points are on exactly opposite sides of the ellipse,
both possible arcs are the same size,
but also there is only one possible ellipse.
In this case, the
distinguishes which of the two possible arcs will be chosen,
and
has no effect.
A depiction of the two possible ellipses,
and four possible arcs,
that can be chosen between.
close
Adds a
closepath
command
to the list of path data commands.
Note:
This is similar to a
line
command
with its ending point set to the starting point of the subpath.
When specifying a raw shape, they’re identical,
but if the path is stroked,
the ending point of the
close
command is smoothly joined
with the start of the subpath,
which affects how line-joins and line-caps are rendered.
3.1.1.1.
Using
shape()
to create responsive, parametric speech bubble
The
shape()
function enables shapes that are responsive, rather than scalable.
While the
polygon()
shape is also responsive, it only support simple rounded corners and not complex curves.
To demonstrate, let’s start with a speech bubble, such as the following:
Using this shape with a
clip-path
can be done by using the
path()
function:
.bubble
clip-path
path
"m 5 0 H 95 Q 100 0 100 5 V 92 Q 100 97 95 97 H 70 l -2 3 l -2 -3 H 5 Q 0 97 0 92 V 5 Q 0 0 5 0"
};
Altohugh this path can easily scale, the scaled results are not always desirable. e.g. when scaled to a small balloon, the arrow and corners are scaled to become almost invisible:
To construct this shape using the
shape()
function, let’s start by turning all the pixel values from the
path
function to percentages.
Note that the
shape()
function begins with
from
.bubble
clip-path
shape
from
hline to
95
curve to
100
with
100
vline to
92
curve to
95
97
with
100
97
hline to
70
line by
-2
line by
-2
-3
hline to
curve to
92
with
97
vline to
curve to
with
);
To make this path responsive, as in, respond well to size changes, we will convert some of its units to
px
values,
specifically the ones the control the curves and arrows:
.bubble
clip-path
shape
from
px
hline to
calc
100
px
),
curve to
100
px
with
100
vline to
calc
100
px
),
curve to
calc
100
px
calc
100
px
with
100
calc
100
px
),
hline to
70
line by
-2
px
px
line by
-2
px
-3
px
hline to
px
curve to
calc
100
px
with
calc
100
px
),
vline to
px
curve to
px
with
);
When applied as
clip-path
, it would looks like the following:
The whole speech bubble is scaled to the reference box, while the curves and arrows stay more constant.
Since
shape()
uses CSS units, we can replace some of the edges with
position
values:
.bubble
clip-path
shape
from
px
hline to
calc
100
px
),
curve to right
px
with right top
vline to
calc
100
px
),
curve to
calc
100
px
calc
100
px
with right
calc
100
px
),
hline to
70
line by
-2
px
px
line by
-2
px
-3
px
hline to
px
curve to left
calc
100
px
with left
calc
100
px
),
vline to
px
curve to
px
top with left top
);
Another useful feature of
shape()
is that it can be used alongside CSS properties. In this case,
we can make the arrow and radius parametric:
:root
--radius
px
--arrow-length
px
--arrow-half-width
px
--arrow-position
70
--arrow-bottom-offset
calc
100
var
--radius
var
--arrow-length
));
.bubble
animation
bubble
100
ms
clip-path
shape
from
var
---radius
top
hline to
calc
100
var
---radius
)),
curve to right
var
---radius
with right top
vline to
var
---arrow-bottom-offset
),
curve to
calc
100
var
---radius
))
calc
100
var
---arrow-length
))
with right
calc
100
var
---arrow-length
)),
hline to
var
---arrow-position
),
line by
var
---arrow-half-width
var
---arrow-length
),
line by
var
---arrow-half-width
calc
px
var
---arrow-length
)),
hline to
var
---radius
),
curve to left
var
---arrow-bottom-offset
with left
calc
100
var
---arrow-length
)),
vline to
var
---radius
),
curve to
var
---radius
top with left top
);
3.1.1.2.
Interpolating the
shape()
Function
shape()
and
path()
functions can be
interpolated
with each other
if their associated list of path data commands is the same length
and has the same commands, in order, with the first command of the
path()
function interpolating with the
initial
in the
shape()
function.
Note:
The first command of a
path()
function is guaranteed to be a
move
, see
moveTo
in the SVG spec.
If the starting and ending values are both
path()
functions,
the interpolated value is a
path()
function;
otherwise it’s a
shape()
function.
In either case,
the interpolated value must represent the same list of path data commands,
with each command having its numerical components interpolated between the corresponding components of the starting and ending list.
For this purpose, commands are "the same" if they use the same command keyword,
and use the same
keyword.
For
curve
and
smooth
, they also must have the same number of control points.
If an
arc
command has different
between its starting and ending list,
then the interpolated result uses
cw
for any progress value between 0 and 1.
If it has different
keywords,
then the interpolated result uses
large
for any progress value between 0 and 1.
Note:
The
arc
keyword interpolation rules
are meant to match existing SVG
path
interpolation rules.
3.2.
Computed Values of Basic Shapes
The values in a
function are computed as specified, with these exceptions:
Omitted values are included and compute to their defaults.
value in
circle()
or
ellipse()
is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a
<'border-radius'>
value in a
function
is computed as an expanded list of all eight
values.
All
functions compute to the equivalent
inset()
function.
Note:
Given
rect(t r b l)
the equivalent function is
inset(t calc(100% - r) calc(100% - b) l)
Given
xywh(x y w h)
the equivalent function is
inset(y calc(100% - x - w) calc(100% - y - h) x)
Tests
shape-image-threshold-computed.html
(live test)
(source)
shape-margin-computed.html
(live test)
(source)
shape-outside-computed.html
(live test)
(source)
circle-function-computed.html
(live test)
(source)
ellipse-function-computed.html
(live test)
(source)
inset-function-computed.html
(live test)
(source)
path-function-computed.html
(live test)
(source)
polygon-function-computed.html
(live test)
(source)
rect-function-computed.html
(live test)
(source)
xywh-function-computed.html
(live test)
(source)
shape-outside-computed-shape-000.html
(live test)
(source)
shape-outside-computed-shape-001.html
(live test)
(source)
3.3.
Serialization of Basic Shapes
To serialize the
functions,
serialize as per their individual grammars,
in the order the grammars are written in,
joining space-separated tokens with a single space,
and following each serialized comma with a single space.
For serializing
computed values
component values are
computed
and omitted when possible without changing the meaning.
As
specified value
serialization of the shape functions are relatively trivial,
here are some examples of
computed value
serializations
for
circle()
notations when used in
shape-outside
serialization rules
mean that
keywords
compute to
percentages,
and serialize in horizontal-vertical order.
circle(at bottom left)
/* serializes to */
circle(at 0% 100%)
Omitting optional components means that
default values do not show up in the serialization.
circle(closest-side at center)
/* serializes to */
circle()
Value
computation
means that
some functions
canonicalize to a different form
rect(10px 20px 30px 40px)
/* serializes to */
inset(10px calc(100% - 20px) calc(100% - 30px) 40px)
Tests
basic-shape-circle-ellipse-serialization.html
(live test)
(source)
3.4.
Interpolation of Basic Shapes
For interpolating between
one basic shape and a second,
the rules below are applied.
The values in the shape functions interpolate
by computed value
The list values interpolate as
length, percentage, or calc where possible.
If list values are not one of those types
but are identical
(such as finding
nonzero
in the same list position
in both lists)
those values do interpolate.
Both shapes must use the same
reference box
If both shapes are the same type,
that type is
ellipse()
or
circle()
and the radiuses are specified as
(rather than keywords),
interpolate between each value
in the shape functions.
If both shapes are of type
inset()
interpolate between each value
in the shape functions.
If both shapes are of type
polygon()
both polygons have the same number of vertices,
and use the same
<'fill-rule'>
interpolate between each value
in the shape functions.
In all other cases no interpolation is specified.
Tests
shape-image-threshold-interpolation.html
(live test)
(source)
shape-margin-composition.html
(live test)
(source)
shape-margin-interpolation.html
(live test)
(source)
shape-outside-composition.html
(live test)
(source)
shape-outside-interpolation.html
(live test)
(source)
basic-shape-interpolation.html
(live test)
(source)
4.
Shapes from Image
Another way of defining shapes
is by specifying a source
whose alpha channel is used
to compute the shape.
The shape is computed to be the path or paths
that enclose the area(s)
where the opacity of the specified image
is greater than the
shape-image-threshold
value.
The absence of any pixels with an alpha value
greater than the specified threshold
results in an empty float area that will not affect wrapping.
If the
shape-image-threshold
is not specified,
the initial value to be considered is 0.0.
The image is sized and positioned
as if it were a replaced element
whose specified width and height
are the same as the element’s
used content box size.
For animated raster image formats (such as
GIF
),
the first frame of the animation sequence is used.
An image is floating to the left of a paragraph.
The image shows the 3D version of the
CSS logo over a transparent background.
The logo has a shadow using an alpha-channel.
The image defines its
float area
through the
shape-outside
property.
blah blah blah blah...
The
shape-outside
property re-uses the url
from the src attribute of the img element.
It is perfectly possible to display an image
and use a different image for its
float area
In the figure below, the alpha-channel threshold
is represented by the dotted line around the CSS logo.
It’s then possible to affect where the lines
of the paragraph start in three ways:
Modifying the alpha channel in the image
Changing the value of the
shape-image-threshold
property
Changing the value of the
shape-margin
property (see example 8)
A float shape around an image using its alpha-channel.
Tests
shape-image-threshold-interpolation.html
(live test)
(source)
shape-image-threshold-computed.html
(live test)
(source)
shape-image-threshold-invalid.html
(live test)
(source)
shape-image-threshold-valid.html
(live test)
(source)
float-retry-push-image.html
(live test)
(source)
shape-outside-linear-gradient-001.html
(live test)
(source)
shape-outside-linear-gradient-002.html
(live test)
(source)
shape-outside-linear-gradient-003.html
(live test)
(source)
shape-outside-linear-gradient-004.html
(live test)
(source)
shape-outside-linear-gradient-005.html
(live test)
(source)
shape-outside-linear-gradient-006.html
(live test)
(source)
shape-outside-linear-gradient-007.html
(live test)
(source)
shape-outside-linear-gradient-008.html
(live test)
(source)
shape-outside-linear-gradient-009.html
(live test)
(source)
shape-outside-linear-gradient-010.html
(live test)
(source)
shape-outside-linear-gradient-011.html
(live test)
(source)
shape-outside-linear-gradient-012.html
(live test)
(source)
shape-outside-linear-gradient-013.html
(live test)
(source)
shape-outside-linear-gradient-014.html
(live test)
(source)
shape-outside-linear-gradient-015.html
(live test)
(source)
shape-outside-linear-gradient-016.html
(live test)
(source)
shape-outside-radial-gradient-001.html
(live test)
(source)
shape-outside-radial-gradient-002.html
(live test)
(source)
shape-outside-radial-gradient-003.html
(live test)
(source)
shape-outside-radial-gradient-004.html
(live test)
(source)
shape-image-000.html
(live test)
(source)
shape-image-001.html
(live test)
(source)
shape-image-002.html
(live test)
(source)
shape-image-003.html
(live test)
(source)
shape-image-004.html
(live test)
(source)
shape-image-005.html
(live test)
(source)
shape-image-006.html
(live test)
(source)
shape-image-007.html
(live test)
(source)
shape-image-008.html
(live test)
(source)
shape-image-009.html
(live test)
(source)
shape-image-010.html
(live test)
(source)
shape-image-011.html
(live test)
(source)
shape-image-012.html
(live test)
(source)
shape-image-013.html
(live test)
(source)
shape-image-014.html
(live test)
(source)
shape-image-015.html
(live test)
(source)
shape-image-016.html
(live test)
(source)
shape-image-017.html
(live test)
(source)
shape-image-018.html
(live test)
(source)
shape-image-019.html
(live test)
(source)
shape-image-020.html
(live test)
(source)
shape-image-021.html
(live test)
(source)
shape-image-022.html
(live test)
(source)
shape-image-023.html
(live test)
(source)
shape-image-024.html
(live test)
(source)
shape-image-025.html
(live test)
(source)
shape-image-026.html
(live test)
(source)
shape-image-027.html
(live test)
(source)
shape-image-028.html
(live test)
(source)
shape-image-029.html
(live test)
(source)
5.
Shapes from Box Values
Shapes can be defined
by reference to edges in the
CSS Box Model
These edges include
border-radius curvature
[CSS3BG]
from the used border-radius values.
The
value extends the
value
to include
margin-box
Its syntax is:
margin-box
half-border-box
The definitions of the values are:
The
margin-box
value defines the shape
enclosed by the outside margin edge.
The corner radii of this shape are determined
by the corresponding border-radius and margin values.
If the ratio of
border-radius/margin
is 1 or more,
or margin is negative or zero,
then the margin box corner radius is
max(border-radius + margin, 0)
The margin box’s corners are
outset-adjusted
given the element’s
border box
border-radius
, and the margin.
The
border-box
value defines the shape
enclosed by the outside border edge.
This shape follows all
of the normal border radius shaping rules
for the outside of the border.
The
padding-box
value defines the shape
enclosed by the outside padding edge.
This shape follows all
of the normal border radius shaping rules
for the inside of the border.
The
content-box
value defines the shape
enclosed by the outside content edge.
Each corner radius of this box
is the larger of 0
or
border-radius - border-width - padding
The
half-border-box
value defines the shape
enclosed by a box that is in the middle between the
padding-box
and the
border-box
Given the 100px square below with
10px padding, border and margins,
the box values define these shapes:
margin-box
: the shape containing all of the yellow pixels
border-box
: the shape containing all of the black pixels
padding-box
: the shape containing all of the mauve pixels
content-box
: the shape containing all of the blue pixels
Simple CSS Box Model Edges
And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties:
border-radius: 20px 20px 20px 40px;
border-width: 30px 10px 20px 10px;
padding: 10px 20px 10px 10px;
margin: 20px 10px 10px 10px;
Complex CSS Box Model Edges
The difference between normal float wrapping
and wrapping around the shape defined
by the margin-box value is that
the margin-box shape includes corner shaping.
Take the 100px square with 10px padding,
border and margins,
but with a border-radius of 60px.
If you make a left float out of it,
content normally wraps in this manner:
Normal float wrapping
If you add a margin-box shape to the float,
then content wraps around the rounded margin-box corners.
shape-outside: margin-box;
Float wrapping with margin-box
Tests
shape-outside-border-box-001.html
(live test)
(source)
shape-outside-border-box-002.html
(live test)
(source)
shape-outside-border-box-003.html
(live test)
(source)
shape-outside-border-box-border-radius-001.html
(live test)
(source)
shape-outside-border-box-border-radius-002.html
(live test)
(source)
shape-outside-border-box-border-radius-003.html
(live test)
(source)
shape-outside-border-box-border-radius-004.html
(live test)
(source)
shape-outside-border-box-border-radius-005.html
(live test)
(source)
shape-outside-border-box-border-radius-006.html
(live test)
(source)
shape-outside-border-box-border-radius-007.html
(live test)
(source)
shape-outside-border-box-border-radius-008.html
(live test)
(source)
shape-outside-border-box-border-radius-009.html
(live test)
(source)
shape-outside-border-box-border-radius-010.html
(live test)
(source)
shape-outside-border-box-border-radius-011.html
(live test)
(source)
shape-outside-border-box-border-radius-012.html
(live test)
(source)
shape-outside-box-002.html
(live test)
(source)
shape-outside-box-003.html
(live test)
(source)
shape-outside-box-004.html
(live test)
(source)
shape-outside-box-006.html
(live test)
(source)
shape-outside-box-007.html
(live test)
(source)
shape-outside-box-008.html
(live test)
(source)
shape-outside-box-009.html
(live test)
(source)
shape-outside-content-box-001.html
(live test)
(source)
shape-outside-content-box-002.html
(live test)
(source)
shape-outside-content-box-003.html
(live test)
(source)
shape-outside-content-box-border-radius-001.html
(live test)
(source)
shape-outside-content-box-border-radius-002.html
(live test)
(source)
shape-outside-margin-box-001.html
(live test)
(source)
shape-outside-margin-box-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-001.html
(live test)
(source)
shape-outside-margin-box-border-radius-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-003.html
(live test)
(source)
shape-outside-margin-box-border-radius-004.html
(live test)
(source)
shape-outside-margin-box-border-radius-005.html
(live test)
(source)
shape-outside-margin-box-border-radius-006.html
(live test)
(source)
shape-outside-margin-box-border-radius-007.html
(live test)
(source)
shape-outside-margin-box-border-radius-008.html
(live test)
(source)
shape-outside-padding-box-001.html
(live test)
(source)
shape-outside-padding-box-002.html
(live test)
(source)
shape-outside-padding-box-003.html
(live test)
(source)
shape-outside-padding-box-border-radius-001.html
(live test)
(source)
shape-outside-padding-box-border-radius-002.html
(live test)
(source)
shape-outside-box-000.html
(live test)
(source)
shape-outside-shape-box-pair-000.html
(live test)
(source)
6.
Declaring Shapes
Shapes are 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
6.1.
Float Area Shape: the
shape-outside
property
Name:
shape-outside
Value:
none
||
Initial:
none
Applies to:
floats and
initial letter boxes
Inherited:
no
Percentages:
n/a
Computed value:
as
defined
for
(with
following, if supplied); else the computed
; else the keyword as specified
Canonical order:
per grammar
Animation type:
as
defined
for
, otherwise discrete
The values of this property have the following meanings:
none
The
float area
is unaffected.
If one of these values is specified by itself
the shape is computed based on one of
margin-box
border-box
padding-box
or
content-box
which use their respective boxes
including curvature from border-radius,
similar to
background-clip
[CSS3BG]
The shape is computed based on one of the
functions. If a
is also supplied, this defines the
reference box
for the
function. If
is not supplied, then the
reference box
defaults to
margin-box
The shape is extracted
and computed based
on the alpha channel
of the specified
as defined by
shape-image-threshold
User agents must use the
CORS protocol
defined by the
[FETCH]
specification
for all URLs in a
shape-outside
value.
When fetching,
user agents must use "Anonymous" mode,
set the referrer source
to the stylesheet’s URL
and set the origin to the URL
of the containing document.
If this results in network errors
such that there is no valid fallback image,
the effect is as if
the value
none
had been specified.
Tests
shape-outside-composition.html
(live test)
(source)
shape-outside-interpolation.html
(live test)
(source)
inheritance.html
(live test)
(source)
shape-outside-computed.html
(live test)
(source)
shape-outside-invalid-position.html
(live test)
(source)
shape-outside-valid-position.html
(live test)
(source)
shape-outside-infinite-crash.html
(live test)
(source)
shape-outside-invalid-001.html
(live test)
(source)
shape-outside-invalid-circle-000.html
(live test)
(source)
shape-outside-invalid-circle-001.html
(live test)
(source)
shape-outside-invalid-circle-002.html
(live test)
(source)
shape-outside-invalid-circle-003.html
(live test)
(source)
shape-outside-invalid-ellipse-001.html
(live test)
(source)
shape-outside-invalid-ellipse-002.html
(live test)
(source)
shape-outside-invalid-ellipse-003.html
(live test)
(source)
shape-outside-invalid-ellipse-004.html
(live test)
(source)
shape-outside-invalid-ellipse-005.html
(live test)
(source)
shape-outside-invalid-ellipse-006.html
(live test)
(source)
shape-outside-invalid-inset-001.html
(live test)
(source)
shape-outside-invalid-inset-002.html
(live test)
(source)
shape-outside-invalid-inset-003.html
(live test)
(source)
shape-outside-invalid-inset-004.html
(live test)
(source)
float-retry-push-circle.html
(live test)
(source)
float-retry-push-image.html
(live test)
(source)
float-retry-push-inset.html
(live test)
(source)
float-retry-push-polygon.html
(live test)
(source)
float-should-push.html
(live test)
(source)
shape-outside-border-box-001.html
(live test)
(source)
shape-outside-border-box-002.html
(live test)
(source)
shape-outside-border-box-003.html
(live test)
(source)
shape-outside-border-box-border-radius-001.html
(live test)
(source)
shape-outside-border-box-border-radius-002.html
(live test)
(source)
shape-outside-border-box-border-radius-003.html
(live test)
(source)
shape-outside-border-box-border-radius-004.html
(live test)
(source)
shape-outside-border-box-border-radius-005.html
(live test)
(source)
shape-outside-border-box-border-radius-006.html
(live test)
(source)
shape-outside-border-box-border-radius-007.html
(live test)
(source)
shape-outside-border-box-border-radius-008.html
(live test)
(source)
shape-outside-border-box-border-radius-009.html
(live test)
(source)
shape-outside-border-box-border-radius-010.html
(live test)
(source)
shape-outside-border-box-border-radius-011.html
(live test)
(source)
shape-outside-border-box-border-radius-012.html
(live test)
(source)
shape-outside-box-002.html
(live test)
(source)
shape-outside-box-003.html
(live test)
(source)
shape-outside-box-004.html
(live test)
(source)
shape-outside-box-006.html
(live test)
(source)
shape-outside-box-007.html
(live test)
(source)
shape-outside-box-008.html
(live test)
(source)
shape-outside-box-009.html
(live test)
(source)
shape-outside-content-box-001.html
(live test)
(source)
shape-outside-content-box-002.html
(live test)
(source)
shape-outside-content-box-003.html
(live test)
(source)
shape-outside-content-box-border-radius-001.html
(live test)
(source)
shape-outside-content-box-border-radius-002.html
(live test)
(source)
shape-outside-margin-box-001.html
(live test)
(source)
shape-outside-margin-box-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-001.html
(live test)
(source)
shape-outside-margin-box-border-radius-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-003.html
(live test)
(source)
shape-outside-margin-box-border-radius-004.html
(live test)
(source)
shape-outside-margin-box-border-radius-005.html
(live test)
(source)
shape-outside-margin-box-border-radius-006.html
(live test)
(source)
shape-outside-margin-box-border-radius-007.html
(live test)
(source)
shape-outside-margin-box-border-radius-008.html
(live test)
(source)
shape-outside-padding-box-001.html
(live test)
(source)
shape-outside-padding-box-002.html
(live test)
(source)
shape-outside-padding-box-003.html
(live test)
(source)
shape-outside-padding-box-border-radius-001.html
(live test)
(source)
shape-outside-padding-box-border-radius-002.html
(live test)
(source)
shape-outside-linear-gradient-001.html
(live test)
(source)
shape-outside-linear-gradient-002.html
(live test)
(source)
shape-outside-linear-gradient-003.html
(live test)
(source)
shape-outside-linear-gradient-004.html
(live test)
(source)
shape-outside-linear-gradient-005.html
(live test)
(source)
shape-outside-linear-gradient-006.html
(live test)
(source)
shape-outside-linear-gradient-007.html
(live test)
(source)
shape-outside-linear-gradient-008.html
(live test)
(source)
shape-outside-linear-gradient-009.html
(live test)
(source)
shape-outside-linear-gradient-010.html
(live test)
(source)
shape-outside-linear-gradient-011.html
(live test)
(source)
shape-outside-linear-gradient-012.html
(live test)
(source)
shape-outside-linear-gradient-013.html
(live test)
(source)
shape-outside-linear-gradient-014.html
(live test)
(source)
shape-outside-linear-gradient-015.html
(live test)
(source)
shape-outside-linear-gradient-016.html
(live test)
(source)
shape-outside-radial-gradient-001.html
(live test)
(source)
shape-outside-radial-gradient-002.html
(live test)
(source)
shape-outside-radial-gradient-003.html
(live test)
(source)
shape-outside-radial-gradient-004.html
(live test)
(source)
shape-image-000.html
(live test)
(source)
shape-image-001.html
(live test)
(source)
shape-image-002.html
(live test)
(source)
shape-image-003.html
(live test)
(source)
shape-image-004.html
(live test)
(source)
shape-image-005.html
(live test)
(source)
shape-image-006.html
(live test)
(source)
shape-image-007.html
(live test)
(source)
shape-image-008.html
(live test)
(source)
shape-image-009.html
(live test)
(source)
shape-image-010.html
(live test)
(source)
shape-image-011.html
(live test)
(source)
shape-image-012.html
(live test)
(source)
shape-image-013.html
(live test)
(source)
shape-image-014.html
(live test)
(source)
shape-image-015.html
(live test)
(source)
shape-image-016.html
(live test)
(source)
shape-image-017.html
(live test)
(source)
shape-image-018.html
(live test)
(source)
shape-image-019.html
(live test)
(source)
shape-image-020.html
(live test)
(source)
shape-image-021.html
(live test)
(source)
shape-image-022.html
(live test)
(source)
shape-image-023.html
(live test)
(source)
shape-image-024.html
(live test)
(source)
shape-image-025.html
(live test)
(source)
shape-image-026.html
(live test)
(source)
shape-image-027.html
(live test)
(source)
shape-image-028.html
(live test)
(source)
shape-image-029.html
(live test)
(source)
shape-outside-circle-013.html
(live test)
(source)
shape-outside-circle-014.html
(live test)
(source)
shape-outside-circle-015.html
(live test)
(source)
shape-outside-circle-016.html
(live test)
(source)
shape-outside-circle-017.html
(live test)
(source)
shape-outside-circle-018.html
(live test)
(source)
shape-outside-circle-019.html
(live test)
(source)
shape-outside-circle-020.html
(live test)
(source)
shape-outside-circle-021.html
(live test)
(source)
shape-outside-circle-022.html
(live test)
(source)
shape-outside-circle-024.html
(live test)
(source)
shape-outside-circle-025.html
(live test)
(source)
shape-outside-circle-026.html
(live test)
(source)
shape-outside-circle-027.html
(live test)
(source)
shape-outside-circle-028.html
(live test)
(source)
shape-outside-circle-029.html
(live test)
(source)
shape-outside-circle-030.html
(live test)
(source)
shape-outside-circle-031.html
(live test)
(source)
shape-outside-circle-032.html
(live test)
(source)
shape-outside-circle-033.html
(live test)
(source)
shape-outside-circle-034.html
(live test)
(source)
shape-outside-circle-035.html
(live test)
(source)
shape-outside-circle-036.html
(live test)
(source)
shape-outside-circle-037.html
(live test)
(source)
shape-outside-circle-038.html
(live test)
(source)
shape-outside-circle-041.html
(live test)
(source)
shape-outside-circle-042.html
(live test)
(source)
shape-outside-circle-043.html
(live test)
(source)
shape-outside-circle-044.html
(live test)
(source)
shape-outside-circle-047.html
(live test)
(source)
shape-outside-circle-048.html
(live test)
(source)
shape-outside-circle-049.html
(live test)
(source)
shape-outside-circle-050.html
(live test)
(source)
shape-outside-circle-051.html
(live test)
(source)
shape-outside-circle-052.html
(live test)
(source)
shape-outside-circle-053.html
(live test)
(source)
shape-outside-circle-054.html
(live test)
(source)
shape-outside-circle-055.html
(live test)
(source)
shape-outside-circle-056.html
(live test)
(source)
shape-outside-circle-integer-overflow-crash.html
(live test)
(source)
shape-outside-ellipse-013.html
(live test)
(source)
shape-outside-ellipse-014.html
(live test)
(source)
shape-outside-ellipse-015.html
(live test)
(source)
shape-outside-ellipse-016.html
(live test)
(source)
shape-outside-ellipse-017.html
(live test)
(source)
shape-outside-ellipse-018.html
(live test)
(source)
shape-outside-ellipse-019.html
(live test)
(source)
shape-outside-ellipse-020.html
(live test)
(source)
shape-outside-ellipse-021.html
(live test)
(source)
shape-outside-ellipse-022.html
(live test)
(source)
shape-outside-ellipse-023.html
(live test)
(source)
shape-outside-ellipse-024.html
(live test)
(source)
shape-outside-ellipse-025.html
(live test)
(source)
shape-outside-ellipse-030.html
(live test)
(source)
shape-outside-ellipse-031.html
(live test)
(source)
shape-outside-ellipse-032.html
(live test)
(source)
shape-outside-ellipse-033.html
(live test)
(source)
shape-outside-ellipse-034.html
(live test)
(source)
shape-outside-ellipse-035.html
(live test)
(source)
shape-outside-ellipse-036.html
(live test)
(source)
shape-outside-ellipse-037.html
(live test)
(source)
shape-outside-ellipse-038.html
(live test)
(source)
shape-outside-ellipse-039.html
(live test)
(source)
shape-outside-ellipse-040.html
(live test)
(source)
shape-outside-ellipse-041.html
(live test)
(source)
shape-outside-ellipse-042.html
(live test)
(source)
shape-outside-ellipse-043.html
(live test)
(source)
shape-outside-ellipse-044.html
(live test)
(source)
shape-outside-ellipse-045.html
(live test)
(source)
shape-outside-ellipse-046.html
(live test)
(source)
shape-outside-ellipse-047.html
(live test)
(source)
shape-outside-ellipse-048.html
(live test)
(source)
shape-outside-ellipse-049.html
(live test)
(source)
shape-outside-ellipse-050.html
(live test)
(source)
shape-outside-ellipse-051.html
(live test)
(source)
shape-outside-ellipse-052.html
(live test)
(source)
shape-outside-ellipse-integer-overflow-crash.html
(live test)
(source)
shape-outside-inset-010.html
(live test)
(source)
shape-outside-inset-011.html
(live test)
(source)
shape-outside-inset-012.html
(live test)
(source)
shape-outside-inset-013.html
(live test)
(source)
shape-outside-inset-014.html
(live test)
(source)
shape-outside-inset-015.html
(live test)
(source)
shape-outside-inset-016.html
(live test)
(source)
shape-outside-inset-017.html
(live test)
(source)
shape-outside-inset-020.html
(live test)
(source)
shape-outside-inset-021.html
(live test)
(source)
shape-outside-inset-022.html
(live test)
(source)
shape-outside-inset-023.html
(live test)
(source)
shape-outside-inset-024.html
(live test)
(source)
shape-outside-inset-025.html
(live test)
(source)
shape-outside-inset-026.html
(live test)
(source)
shape-outside-inset-027.html
(live test)
(source)
shape-outside-inset-028.html
(live test)
(source)
shape-outside-inset-029.html
(live test)
(source)
shape-outside-inset-030.html
(live test)
(source)
shape-outside-inset-031.html
(live test)
(source)
shape-outside-inset-refcrash.html
(live test)
(source)
shape-outside-polygon-007.html
(live test)
(source)
shape-outside-polygon-008.html
(live test)
(source)
shape-outside-polygon-009.html
(live test)
(source)
shape-outside-polygon-010.html
(live test)
(source)
shape-outside-polygon-011.html
(live test)
(source)
shape-outside-polygon-012.html
(live test)
(source)
shape-outside-polygon-013.html
(live test)
(source)
shape-outside-polygon-014.html
(live test)
(source)
shape-outside-polygon-015.html
(live test)
(source)
shape-outside-polygon-016.html
(live test)
(source)
shape-outside-polygon-017.html
(live test)
(source)
shape-outside-polygon-018.html
(live test)
(source)
shape-outside-polygon-019.html
(live test)
(source)
shape-outside-polygon-020.html
(live test)
(source)
shape-outside-polygon-021.html
(live test)
(source)
shape-outside-polygon-022.html
(live test)
(source)
shape-outside-polygon-023.html
(live test)
(source)
shape-outside-polygon-024.html
(live test)
(source)
shape-outside-polygon-025.html
(live test)
(source)
shape-outside-polygon-032.html
(live test)
(source)
shape-outside-polygon-crash.html
(live test)
(source)
shape-image-threshold-000.html
(live test)
(source)
shape-image-threshold-001.html
(live test)
(source)
shape-image-threshold-002.html
(live test)
(source)
shape-image-threshold-003.html
(live test)
(source)
shape-margin-000.html
(live test)
(source)
shape-margin-001.html
(live test)
(source)
shape-margin-002.html
(live test)
(source)
shape-margin-003.html
(live test)
(source)
shape-margin-004.html
(live test)
(source)
shape-margin-005.html
(live test)
(source)
shape-outside-box-000.html
(live test)
(source)
shape-outside-circle-000.html
(live test)
(source)
shape-outside-circle-001.html
(live test)
(source)
shape-outside-circle-002.html
(live test)
(source)
shape-outside-circle-003.html
(live test)
(source)
shape-outside-circle-004.html
(live test)
(source)
shape-outside-circle-005.html
(live test)
(source)
shape-outside-circle-006.html
(live test)
(source)
shape-outside-circle-007.html
(live test)
(source)
shape-outside-circle-008.html
(live test)
(source)
shape-outside-circle-009.html
(live test)
(source)
shape-outside-circle-010.html
(live test)
(source)
shape-outside-circle-011.html
(live test)
(source)
shape-outside-computed-shape-000.html
(live test)
(source)
shape-outside-computed-shape-001.html
(live test)
(source)
shape-outside-ellipse-000.html
(live test)
(source)
shape-outside-ellipse-001.html
(live test)
(source)
shape-outside-ellipse-002.html
(live test)
(source)
shape-outside-ellipse-003.html
(live test)
(source)
shape-outside-ellipse-004.html
(live test)
(source)
shape-outside-ellipse-005.html
(live test)
(source)
shape-outside-ellipse-006.html
(live test)
(source)
shape-outside-ellipse-007.html
(live test)
(source)
shape-outside-ellipse-008.html
(live test)
(source)
shape-outside-ellipse-009.html
(live test)
(source)
shape-outside-ellipse-010.html
(live test)
(source)
shape-outside-ellipse-011.html
(live test)
(source)
shape-outside-inset-000.html
(live test)
(source)
shape-outside-inset-001.html
(live test)
(source)
shape-outside-inset-0010.html
(live test)
(source)
shape-outside-inset-002.html
(live test)
(source)
shape-outside-inset-003.html
(live test)
(source)
shape-outside-inset-004.html
(live test)
(source)
shape-outside-inset-005.html
(live test)
(source)
shape-outside-inset-006.html
(live test)
(source)
shape-outside-inset-007.html
(live test)
(source)
shape-outside-inset-008.html
(live test)
(source)
shape-outside-inset-009.html
(live test)
(source)
shape-outside-polygon-000.html
(live test)
(source)
shape-outside-polygon-001.html
(live test)
(source)
shape-outside-polygon-002.html
(live test)
(source)
shape-outside-polygon-003.html
(live test)
(source)
shape-outside-polygon-004.html
(live test)
(source)
shape-outside-polygon-005.html
(live test)
(source)
shape-outside-polygon-006.html
(live test)
(source)
shape-outside-shape-arguments-000.html
(live test)
(source)
shape-outside-shape-arguments-001.html
(live test)
(source)
shape-outside-shape-box-pair-000.html
(live test)
(source)
shape-outside-shape-inherit-000.html
(live test)
(source)
shape-outside-shape-initial-000.html
(live test)
(source)
shape-outside-shape-none-000.html
(live test)
(source)
shape-outside-shape-notation-000.html
(live test)
(source)
shape-outside-001.html
(live test)
(source)
shape-outside-002.html
(live test)
(source)
shape-outside-003.html
(live test)
(source)
shape-outside-004.html
(live test)
(source)
shape-outside-005.html
(live test)
(source)
shape-outside-006.html
(live test)
(source)
shape-outside-007.html
(live test)
(source)
shape-outside-008.html
(live test)
(source)
shape-outside-010.html
(live test)
(source)
shape-outside-011.html
(live test)
(source)
shape-outside-012.html
(live test)
(source)
shape-outside-013.html
(live test)
(source)
shape-outside-014.html
(live test)
(source)
shape-outside-015.html
(live test)
(source)
shape-outside-016.html
(live test)
(source)
shape-outside-017.html
(live test)
(source)
shape-outside-018.html
(live test)
(source)
shape-outside-019.html
(live test)
(source)
6.2.
Choosing Image Pixels: the
shape-image-threshold
property
The
shape-image-threshold
defines the alpha channel threshold
used to extract the shape
using an image.
A value of 0.5 means that
the shape will enclose
all the pixels
that are more than 50% opaque.
Name:
shape-image-threshold
Value:
Initial:
Applies to:
floats
Inherited:
no
Percentages:
n/a
Computed value:
specified number, clamped to the range [0,1]
Canonical order:
per grammar
Animation type:
by computed value
The values of this property have the following meanings:
Sets the threshold used
for extracting a shape
from an image.
The shape is defined
by the pixels whose alpha value
is greater than the threshold.
A threshold value outside the range
0.0 (fully transparent)
to 1.0 (fully opaque)
will be clamped to this range.
Note:
A future level of CSS Shapes may define
a switch to use the luminance data
from an image instead of the alpha data.
When this happens,
shape-image-threshold will be extended
to apply its threshold
to either alpha or luminance,
depending on the switch state.
Tests
shape-image-threshold-interpolation.html
(live test)
(source)
inheritance.html
(live test)
(source)
shape-image-threshold-computed.html
(live test)
(source)
shape-image-threshold-invalid.html
(live test)
(source)
shape-image-threshold-valid.html
(live test)
(source)
shape-image-threshold-000.html
(live test)
(source)
shape-image-threshold-001.html
(live test)
(source)
shape-image-threshold-002.html
(live test)
(source)
shape-image-threshold-003.html
(live test)
(source)
6.3.
Expanding a Shape: the
shape-margin
property
The
shape-margin
property adds
a margin to a
shape-outside
This defines a new shape
that is the smallest contour
(in the shrink-wrap sense)
that includes all the points
that are the
shape-margin
distance outward
in the perpendicular direction
from a point on the underlying shape.
This includes any edge or line sections
from the underlying shape.
Note that at points where
a perpendicular is not defined
(e.g. sharp points or line ends)
take all points
on the circle centered at the point
and with a radius of
shape-margin
The new shape produced by applying
shape-outside
is what determines the
float area
and must be constructed
before making any
wrap
decisions.
This property takes only non-negative values.
Name:
shape-margin
Value:
Initial:
Applies to:
floats and
initial letter boxes
Inherited:
no
Percentages:
refer to the
inline size
of the containing block
Computed value:
computed
value
Canonical order:
per grammar
Animation type:
by computed value
Sets the margin of the shape to the specified value.
Note:
Adding a shape-margin does NOT allow a float area
to extend outside a float’s margin box.
Extra margin may need to be applied
along with shape-margin to avoid clipping.
shape-margin
creating an offset from a polygonal
shape-outside
The lighter blue area shows the shape in a 100x100px float,
and the darker blue area shows the 10px offset.
.float {
width: 100px;
height: 100px;
shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
shape-margin: 10px;
If shape-margin is added
to the CSS logo from example 6,
the line boxes
wrapping
around the shape are shortened further.
In case the image’s alpha channel
runs up to the right edge of the image,
some extra margin-right should be applied
to ensure the shape is not clipped by the margin box.
#CSSlogo {
shape-margin: 35px;
margin-right: 35px;
A float shape around an image using its alpha-channel with a 35-pixel
shape-margin
Tests
shape-margin-composition.html
(live test)
(source)
shape-margin-interpolation.html
(live test)
(source)
inheritance.html
(live test)
(source)
shape-margin-computed.html
(live test)
(source)
shape-margin-invalid.html
(live test)
(source)
shape-margin-valid.html
(live test)
(source)
shape-outside-margin-box-001.html
(live test)
(source)
shape-outside-margin-box-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-001.html
(live test)
(source)
shape-outside-margin-box-border-radius-002.html
(live test)
(source)
shape-outside-margin-box-border-radius-003.html
(live test)
(source)
shape-outside-margin-box-border-radius-004.html
(live test)
(source)
shape-outside-margin-box-border-radius-005.html
(live test)
(source)
shape-outside-margin-box-border-radius-006.html
(live test)
(source)
shape-outside-margin-box-border-radius-007.html
(live test)
(source)
shape-outside-margin-box-border-radius-008.html
(live test)
(source)
shape-margin-000.html
(live test)
(source)
shape-margin-001.html
(live test)
(source)
shape-margin-002.html
(live test)
(source)
shape-margin-003.html
(live test)
(source)
shape-margin-004.html
(live test)
(source)
shape-margin-005.html
(live test)
(source)
7.
Privacy Considerations
No privacy concerns have been raised against this specification.
8.
Security Considerations
Since the
value of
shape-outside
can expose some image data in a new way,
use is limited to images with CORS approval.
Acknowledgments
This specification is made possible by input from
Tab Atkins Jr.,
Amelia Bellamy-Royds,
Oriol Brufau,
Andrei Bucur,
Alexandru Chiculita,
Boris Chiou,
Emilio Cobos Álvarez,
Elika Etemad,
Arron Eicholz,
Sylvain Galineau,
Daniel Glazman,
Arno Gourdol,
Zoltan Horvath,
Chris Jones,
Bem Jones-Bey,
Ian Kilpatrick,
Guillaume Lebas,
Ting-Yu Lin,
Eric Meyer,
Marcus Mielke,
Alex Mogilevsky,
Hans Muller,
Mihnea Ovidenie,
Virgil Palanciuc,
Noam Rosenthal,
Robert Sanderson,
Dirk Schulze,
Jen Simmons,
Peter Sorotokin,
Bear Travis,
Lea Verou,
Eugene Veselov,
Brad Werth,
Stephen Zilles
and the CSS Working Group members.
Change Log
Since
2 June 2025
none
Since
15 November 2022
Added Web Platform Test annotations
Changed fill-rule default for path() in SVG shapes
Clarified shape-margin and float area interaction
Added polygon rounding examples
Included all basic shapes in property prose for
issue #9728
Added start of polygon vertex rounding
Used opacity-value (the value) not opacity (the property) as value of shape-image-threshold for
issue #8311
Replaced
opacity
Clarified that shape-outside applies to initial letter boxes for
issue #5160
Rebased ellipse()/circle() definitions on top of
issue #824
Made it clear that the position defaulting can be overridden by other specs (like Motion).
Targeted fix of shape serialization section, fixed examples, for
issue #8695
Fixed xywh() computed value for
issue #9053
Rewrote syntax with implicitly optional comma
PR #9650
Cleanup <*-box> definitions
PR #9505
Added range notation in property definitions
Added vertex rounding for polygon() for
issue #9843
Updated shape-outside prose to include all
s for
issue #9728
Clarified the shape-margin contribution to float areas for
issue #2949
Added fill-rule default handling for SVG shapes from
issue #3468
Moved 'shape()' from level 2
Since
March 20th 2014
Clarified shape-margin computed value
Clarified serialization of default position values, for
issue #402
Clarified empty circles and ellipses for
issue #850
Dropped the "Media:" entry from propdef tables, as with all CSS modules
Updated box model references from CSS 2 to CSS Box Model 3
Updated Computed Value and Animation Type in propdef tables
Clarified computed value of shape-outside property, for
issue #4042
Clarified that shape-image-threshold can take a percentage value, like any alpha value, for
issue #4102
Moved path() back from level 2
Added handling of negative margins for margin-box, for
issue #675
Removed special-case serialization of position values, for
issue #2301
Added clarifications to shape-margin examples
Added margin=0 case for margin-box shape, for
issue #675
Changed rules about degenerate shapes to use shape edges, for
issue #2375
Clarified that invalid path strings make the
path()
invalid, for
issue #392
Rewrote definition of inset rectangles, added auto value, added examples
Clarified computed value of basic shape rect functions
Assorted markup fixes, including use of range notation and exporting defined terms for use in other specifications
Split Privacy and Security considerations into separate sections
Since
February 11th 2014
Replaced divs with images in the first example
Add 0px to last serialization example
Since
December 3rd 2013
Updated computed value and serialization of basic shapes
Added a margin-box example
Change auto to none for shape-outside
Defined shape-box instead of redefining box
Clarified that shape from image may produce more than one path
Since
June 20th 2013
Added shape from box value section
Updated basic-shape interpolation
Allow negative insets, disallow negative radii
Changed relevant to reference
Remove box-sizing dependency, add relevant box keywords
Changed circle() and ellipse() to use radial gradient syntax
Postponed rectangle() to level 2
Clarified shape-from-image sizing and positioning
Change inset-rectangle() to inset()
Future-proof shape-image-threshold to possibly apply to luminance
Added CORS fetching to shape-outside URLs
Changed shape-outside value from
Remove 'percentages based on auto-sizing resolve to 0'
Change initial value of shape-image-threshold to 0.0
Change float positioning to be unaffected by shape-outside
Shapes on floats clipped to float’s margin box
Since
May 3rd 2012
Postpone shapes from SVG elements to a future Shapes level
Postpone shape-inside to a future Shapes level
split exclusions from shapes into separate modules
added inset-rectangle() to basic shapes
Changed shape-inside overflow diagrams to show exclusion behavior
Changed shape-inside to contribute to the wrapping context
Defined exclusion edges relative to wrapping content’s writing mode
Made use of start, end, before and after consistent
Added interpolation for basic shapes
Changed basic shapes to depend on box specified with box-sizing
Added overflow behavior for shape-inside.
Added wrap-flow:minimum.
Clarified processing model.
Changed wrap-margin and wrap-padding to shape-margin and shape-padding.
Removed wrap shorthand.
Since
December 13th 2011
Clarified processing model.
Clarified interaction with floats.
Clarified that an exclusion element establishes a new block formatting context.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
arc
, in § 3.1.1
, in § 3.1.1
, in § 3.1.1
, in § 3.1.1
(type)
, in § 3
value for shape-outside
, in § 6.1
, in § 3.1
border-box
, in § 5
by
, in § 3.1.1
ccw
, in § 3.1.1
circle()
, in § 3.1
close
, in § 3.1.1
, in § 3.1.1
content-box
, in § 5
, in § 3.1.1
, in § 3.1.1
curve
, in § 3.1.1
, in § 3.1.1
cw
, in § 3.1.1
direction-agnostic size
, in § 1.3
ellipse()
, in § 3.1
Float area
, in § 1.3
half-border-box
, in § 5
, in § 3.1.1
, in § 6.1
inset()
, in § 3.1
large
, in § 3.1.1
, in § 6.3
line
, in § 3.1.1
, in § 3.1.1
margin-box
, in § 5
move
, in § 3.1.1
, in § 3.1.1
none
, in § 6.1
, in § 6.2
padding-box
, in § 5
path()
, in § 3.1
polygon()
, in § 3.1
rect()
, in § 3.1
reference box
, in § 3
, in § 3.1.1
shape()
, in § 3.1
, in § 5
, in § 3.1.1
shape-image-threshold
, in § 6.2
shape-margin
, in § 6.3
shape-outside
, in § 6.1
small
, in § 3.1.1
smooth
, in § 3.1.1
, in § 3.1.1
to
, in § 3.1.1
, in § 3.1.1
wrap
, in § 1.3
wrapping
, in § 1.3
xywh()
, in § 3.1
Terms defined by reference
[CSS-BOX-4]
defines the following terms:
border box
margin box
[CSS-CASCADE-5]
defines the following terms:
computed value
specified value
[CSS-COLOR-4]
defines the following terms:
opacity
[CSS-IMAGES-3]
defines the following terms:
[CSS-IMAGES-4]
defines the following terms:
gradient box
[CSS-INLINE-3]
defines the following terms:
initial letter box
[CSS-MASKING]
defines the following terms:
clip
clip-path
nonzero
[CSS-SYNTAX-3]
defines the following terms:
invalid
[CSS-TRANSFORMS-1]
defines the following terms:
rotate()
[CSS-VALUES-4]
defines the following terms:
&&
CSS-wide keywords
em
interpolate
px
{A,B}
{A}
||
[CSS-VALUES-5]
defines the following terms:
bottom
center
left
right
top
x-end
x-start
y-end
y-start
[CSS-VARIABLES-2]
defines the following terms:
var()
[CSS-WRITING-MODES-4]
defines the following terms:
inline size
[CSS2]
defines the following terms:
margin
[CSS3BG]
defines the following terms:
background-clip
border-radius
outset-adjusted border radius
[SVG-PATHS]
defines the following terms:
path
[SVG2]
defines the following terms:
fill-rule
viewBox
References
Normative References
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. URL:
[CSS-IMAGES-4]
Elika Etemad; Tab Atkins Jr.; Lea Verou.
CSS Images Module Level 4
. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. URL:
[CSS-MASKING]
Dirk Schulze; Brian Birtles; Tab Atkins Jr..
CSS Masking Module Level 1
. URL:
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. URL:
[CSS-TRANSFORMS-1]
Simon Fraser; et al.
CSS Transforms Module Level 1
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne.
CSS Values and Units Module Level 5
. URL:
[CSS-VARIABLES-2]
CSS Custom Properties for Cascading Variables Module Level 2
. Editor's Draft. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3BG]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS3BOX]
Elika Etemad.
CSS Box Model Module Level 3
. URL:
[FETCH]
Anne van Kesteren.
Fetch Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. URL:
Non-Normative References
[CSS3-EXCLUSIONS]
Rossen Atanassov; Vincent Hardy; Alan Stearns.
CSS Exclusions Module Level 1
. URL:
[SVG-PATHS]
Cyril Concolato; Cameron McCormack; Doug Schepers.
SVG Paths
. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
shape-image-threshold
floats
no
n/a
by computed value
per grammar
specified number, clamped to the range [0,1]
shape-margin
floats and initial letter boxes
no
refer to the inline size of the containing block
by computed value
per grammar
computed
shape-outside
none | [
none
floats and initial letter boxes
no
n/a
as defined for
per grammar
as defined for
MDN
clip-path
In all current engines.
Firefox
3.5+
Safari
9.1+
Chrome
55+
Opera
Edge
79+
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
shape-image-threshold
In all current engines.
Firefox
62+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
shape-margin
In all current engines.
Firefox
62+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
10.3+
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
path
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
path
In no current engines.
Firefox
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
path
Firefox
97+
Safari
None
Chrome
52+
Opera
60+
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
51+
MDN
shape-outside
In all current engines.
Firefox
62+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
basic-shape/circle
In all current engines.
Firefox
54+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
basic-shape/ellipse
In all current engines.
Firefox
54+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
basic-shape/inset
In all current engines.
Firefox
54+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
basic-shape/polygon
In all current engines.
Firefox
54+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
basic-shape
In all current engines.
Firefox
54+
Safari
10.1+
Chrome
37+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile