CSS Shapes for Floats
Syntax
-
shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>
-
shape-margin: <length> | <percentage>
-
shape-image-threshold: <number>
Parameters
| Parameter | Details |
|---|---|
| none | A value of none means that the float area (the area that is used for wrapping content around a float element) is unaffected. This is the default/initial value. |
| basic-shape | Refers to one among inset(), circle(), ellipse() or polygon(). Using one of these functions and its values the shape is defined. |
| shape-box | Refers to one among margin-box, border-box, padding-box, content-box. When only <shape-box> is provided (without <basic-shape>) this box is the shape. When it is used along with <basic-shape>, this acts as the reference box. |
| image | When an image is provided as value, the shape is computed based on the alpha channel of the image specified. |
Remarks
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 -webkit- prefix.
It is not yet supported in IE, Edge and Firefox.
