CSS Shapes Level 1 Sample

Available in Chrome 37+

Defining the shape

Thanks to the shape-outside css property set on the element on the left, this paragraph is flowing around the polygon shape defined in that property's value.

There are four basic shapes supported: polygon(), circle(), ellipse() and inset(). This circle is defined using the radius (80px) and the center position (at 50% 50%).

inset() is used to create rectangular shapes inside an element. It is useful for defining some rounded corners for the float area.

You can use alpha channel of an image to float text around it. Pass the image's url to the shape-outside property. The shape is defined by the pixels whose alpha value is greater than the threshold specified in the shape-image-threshold.

Shape spacing

shape-margin creates a space between the shape defined in shape-outside and the flowing text around it.

CSS shapes use reference box to define the exact layout of the float area. Apart from the default width and height of the element, margin-box, content-box, padding-box, and border-box can be used. This shape uses margin-box, defined in the shape-outside property.

This shape uses border-box, defined in the shape-outside property. The content is in red, border in yellow and margin area in light blue.

This shape uses padding-box, defined in the shape-outside property. The content is in red, border in yellow and margin area in light blue.

This shape uses content-box, defined in the shape-outside property. The content is in red, border in yellow and margin area in light blue.