Stats

219 Contributors: 3 Monday, September 19, 2016
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

Shapes for Floats

Syntax

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

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

  • shape-image-threshold: <number>

Parameters

ParameterDetails
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.

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.

Related Examples