mozilla

shape-outside

This article is in need of a technical review.

Summary

The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.

Syntax

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-oustide: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

Values

none
The float area is unaffected
<shape-box>
If one of these is specified by itself the shape is computed based on one of 'margin-box', 'border-box', 'padding-box' or 'content-box' which us their respective boxes including curvature from border-radius, similar to 'background-clip'.
<basic-shape>
The shape is computed based on the values of one of 'inset()', 'circle()', 'ellipse()' or 'polygon()'. If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to 'margin-box'.
<image>
The shape is extracted and computed based on the alpha channel of the specified <image> as defined by 'shape-image-threshold'.
User agents must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a 'shape-outside' value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value 'none' had been specified.

Formal syntax

none | <shape-box> || <basic-shape> | <image>

Example

HTML Content

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <p>
      Sometimes a web page's text content appears to be
      funneling your attention towards a spot on the page
      to drive you to follow a particular link.  Sometimes
      you don't notice.
    </p>
</div>

CSS Content

.main {
    width: 500px;
    height: 200px;
}

.left {
    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
    float: left;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    float: right;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
    text-align: center;
}

Specifications

Specification Status Comment
CSS Shapes Module Level 1
The definition of 'shape-outside' in that specification.
Candidate Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 37 Not supported Not supported 24 8.0 -webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported Not supported Not supported Not supported 8.0 -webkit

See also

Document Tags and Contributors

Contributors to this page: teoli, Sebastianz, Ugoku, rebeccahauck, Braiam, zolotov
Last updated by: Sebastianz,