mozilla
Your Search Results

    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

    Formal syntax: none | <shape-box> || <basic-shape> | <image>
    shape-outside: none
    shape-outside: margin-box
    shape-outside: content-box
    shape-outside: border-box
    shape-outside: padding box
    
    shape-outside: circle()
    shape-outside: ellipse()
    shape-oustide: inset(10px 10px 10px 10px)
    shape-outside: polygon(10px 10px, 20px 20px, 30px 30px)
    
    shape-outside: url(image.png)
    
    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.

    Examples

    shape-outside

    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: rebeccahauck, Ugoku, zolotov, Braiam, teoli
    Last updated by: Braiam,