This page has been flagged with the following issues:
W3C Editor's Draft
Declares a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area.
|Initial value|| |
|Computed value||Computed lengths for <basic-shape>, the absolute URI for <image>, otherwise as specified.|
|CSS Object Model Property|| |
- The float area uses the margin box as normal.
- The shape is computed based on the values of one of rectangle, inset-rectangle, circle, ellipse or polygon:
rectangle(<x>, <y>, <width>, <height> [, <rx>, <ry>])defines a rectangle with an origin and a size. The optional arguments rx and ry define the "rounded corners" in the horizontal and vertical direction.
inset-rectangle(<top>, <right>, <bottom>, <left> [, <rx>, <ry>])defines a rectangle by top, right, bottom and left insets. The optional arguments rx and ry define the "rounded corners" in the horizontal and vertical direction.
circle(<cx, <cy>, <r>)defines a circle with a center point and a radius.
ellipse(<cx, <cy>, <rx>, <ry>)defines a circle with a center point and a radii for the horizontal and vertical directions.
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)defines a polygon based on a list of points
- If <image> references an image (fetched using the CORS-enabled fetch method defined by the HTML5 specification), the shape is extracted and computed based on the alpha channel of the image. If <image> does not reference an image or if the fetch attempt results in any error such that there is no fallback image, the effect is as if the value auto had been specified.
/* shape used is a rectangle equal to the content box */ shape-outside: rectangle(0, 0, 100%, 100%); /* shape used is an inset rectangle 10px smaller than the content box in each dimension */ shape-outside: inset-rectangle(5px, 5px, 5px, 5px); /* shape used is a rounded rectangle */ shape-outside: rectangle(0 ,0, 100%, 100%, 10px, 10px); /* shape used is a circle filling the content box */ shape-outside: circle(0, 0, 50%); /* shape used is an ellipse, wider than it is tall */ shape-outside: ellipse(0, 0, 50%, 30%); /* shape used is a diamond, described as a polygon */ shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* shape used is the alpha channel of an image file */ shape-outside: url(path/to/image.png);
Currently implemented as an experimental feature in WebKit and Blink. This can be used with a -webkit- prefix in WebKit nightly builds and with a -webkit- prefix in Chrome Canary builds with experimental-webkit-features enabled: chrome://flags/#enable-experimental-webkit-features
|CSS Shapes Module Level 1||Editor's Draft|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|