CSS Shapes for Floats

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!


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

Got any CSS Question?