246 Chapter 19
Shapes
One limitation of CSS is that all elements are rectangular. Even if you
use rounded corners or clip an element (as discussed in Chapter 18), the
underlying box is still rectangular. So, for example, content floated around
a rounded or clipped element will follow the rectangular outline of the ele-
ment’s bounding box, as you can see in Figure 19-1.Figure 19-1: Although the element here has rounded corners, content floated around it
follows its rectangular bounding box.The CSS Shapes Module (http://www.w3.org/TR/css-shapes/) addresses
this problem by allowing you to apply geometrical shapes to elements, so
inline content can flow around the outline of these shapes, rather than the
original bounding box. The shape-outside property defines the shape to be
applied to an element:E { shape-outside: shape-function; }The shape-function value can be any of the functions allowed on
the clip-shape property (introduced in “Clipping” on page 235): inset(),
circle(), ellipse(), or polygon(). For example, this code creates a circle with
a radius of 100px and a center at the top left of the element it’s applied to:E { shape-outside: circle(100px at left top); }When this element is floated, any inline content around it wraps
around the outline of the circle, as shown in Figure 19-2.
Note the shape applies only to the element’s float outline; the back-
ground color, images, and borders will still respect the element’s box. As
you can see in Figure 19-3, I’ve removed the border-radius value from the
floated element, and the text overlaps the element’s box. To avoid this prob-
lem, you could consider using a clip path (see “Clipping” on page 235)
that matches the defined shape.