The Future of CSS 247
Figure 19-2: An element with a CSS Shape applied. Content flows around the defined
circular outline rather than the bounding box.
Figure 19-3: Without a matching border-radius value, floated text overlaps the back-
ground color of the shaped element.
To create extra space between the edge of the float shape and the
content flowing around it, you can use the shape-margin property. This prop-
erty accepts any length value. For example, this code adds an extra 0.5em
around the shape:
E { shape-margin: 0.5em; }
Note that, unlike the margin property, you can only add a single margin
value that applies evenly to all sides of the shape.
Exclusions
As of this writing, in order to have content flow around an element you
must make the element float. The drawback is that an element can only be
floated to the left or right; you can neither position it in the middle of text
nor do you have much fine control.
