W3C home > Mailing lists > Public > www-style@w3.org > November 2013

[css-shapes] <basic-shapes> etc. summary 3

From: Alan Stearns <stearns@adobe.com>
Date: Sat, 9 Nov 2013 23:07:13 -0800
To: www-style list <www-style@w3.org>
Message-ID: <CEA551A1.15143%stearns@adobe.com>
Many decisions were made today today in the face-to-face meeting about CSS
Shapes level 1.

We resolved that we keep the current editor's draft syntax for inset() and

inset() = inset( <shape-arg>{1,4} [ round <border-radius> ]? )
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

We change circle() and ellipse() to use radial gradient syntax:

circle() = circle( [<size>] [at <position>] )
ellipse() = ellipse( [<size>] [at <position>] )

And we postpone rectangle() to level 2, because the way SVG and CSS define
rectangles is incompatible, and you can get a rectangle both with inset()
and polygon().

Then, we resolved to remove the dependency on box-sizing in basic shapes
in favor of a raft of new keywords for shapes defined by the relevant
boxes. So you can say:

shape-outside: border-box;

To wrap around a shape defined by the outside border edge. This includes
curvature from border-radius. But you can also use the keyword to
determine how percentages in a basic shape are resolved. So either of

shape-outside: border-box circle(50%);
shape-outside: circle(50%) border-box;

will create a circle shape centered in the border box with a radius 50% of
the width of the border box. You can also use margin-box, padding-box and
content-box as keywords (these include curvature from border radius as
well, in just the same way as background-clip).


Received on Sunday, 10 November 2013 07:07:39 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:36 UTC