CSS Shapes for Floats


  • shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>

  • shape-margin: <length> | <percentage>

  • shape-image-threshold: <number>


noneA 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-shapeRefers to one among inset(), circle(), ellipse() or polygon(). Using one of these functions and its values the shape is defined.
shape-boxRefers 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.
imageWhen 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 -webkit- prefix.

It is not yet supported in IE, Edge and Firefox.