Shapes for Floats
shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>
shape-margin: <length> | <percentage>
|none||A value of |
|basic-shape||Refers to one among |
|shape-box||Refers to one among |
|image||When an image is provided as value, the shape is computed based on the alpha channel of the image specified.|
Browser support for the CSS Shapes module is very limited at this point in time.
It is supported in Chrome v37+ and Opera 24+ without browser/vendor prefixes. Safari supports it from v7.1+ but with the
It is not yet supported in IE, Edge and Firefox.
shape-margin CSS property adds a margin to
In this example, a 10px margin is added around the shape using
shape-margin. This creates a bit more space between the imaginary circle that defines the float area and the actual content that is flowing around.
Shape Outside with Basic Shape – circle()
shape-outside CSS property one can define shape values for the float area so that the inline content wraps around the shape instead of the float's box.
In the above example, both the images are actually square images and when the text is placed without the
shape-outside property, it will not flow around the circle on either side. It will flow around the containing box of the image only. With
shape-outside the float area is re-defined as a circle and the content is made to flow around this imaginary circle that is created using
The imaginary circle that is used to re-define the float area is a circle with radius of 80px drawn from the center-mid point of the image's reference box.
Below are a couple of screenshots to illustrate how the content would be wrapped around when
shape-outside is used and when it is not used.