SHAPE-OUTSIDE

The shape-outside property changes the geometry of a float element's float area.

SYNTAX

CSS


            shape-outside: value;

JS


            object.style.shapeOutside = "value";

VALUES


            <'shape-outside'> = none | [ <basic-shape> || <shape-box> ] | <image>


            none

The float area is unaffected.


            <basic-shape> = inset() | circle() | ellipse() | polygon() | path()


            inset() = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

An inset rectangle.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <'border-radius'> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            circle() = circle( <shape-radius>? [ at <position> ]? )

A circle.


            <shape-radius> = <length-percentage> | closest-side | farthest-side


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            closest-side

Uses the length from the center of the shape to the closest side of the reference box.


            farthest-side

Uses the length from the center of the shape to the farthest side of the reference box.


            <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


            left

Left.


            center

Center.


            right

Right.

top

Top.


            bottom

Bottom.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            ellipse() = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

An ellipse.


            <shape-radius> = <length-percentage> | closest-side | farthest-side


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            closest-side

Uses the length from the center of the shape to the closest side of the reference box.


            farthest-side

Uses the length from the center of the shape to the farthest side of the reference box.


            <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


            left

Left.


            center

Center.


            right

Right.

top

Top.


            bottom

Bottom.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            polygon() = polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )

A polygon.


            <'fill-rule'> = nonzero | evenodd


            nonzero

Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray.


            evenodd

Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            path() = path( [<'fill-rule'>,]? <string> )

A path.


            <'fill-rule'> = nonzero | evenodd


            nonzero

Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray.


            evenodd

Determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.


            <string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').


            <shape-box> = <box> | margin-box


            <box> = border-box | padding-box | content-box


            border-box

Area within the border box.


            padding-box

Area within the padding box.


            content-box

Area within the content box.


            margin-box

Area within the margin box.


            <image> = <url> | <gradient>


            <url> = url( <string> <url-modifier>* )


            <string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').


            <url-modifier>

Changes the meaning or the interpretation of the URL.


            <gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>


            <linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )


            <angle>

deg

Degrees. There are 360 degrees in a full circle.


            grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.


            turn

Turns. There is 1 turn in a full circle.


            <side-or-corner> = [left | right] || [top | bottom]


            left

Left.


            right

Right.

top

Top.


            bottom

Bottom.


            <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#


            <linear-color-stop> = <color> && <length-percentage>?


            <color>

Specifies the color using a keyword or a numerical specification.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <linear-color-hint> = <length-percentage>


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )


            <angle>

deg

Degrees. There are 360 degrees in a full circle.


            grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.


            turn

Turns. There is 1 turn in a full circle.


            <side-or-corner> = [left | right] || [top | bottom]


            left

Left.


            right

Right.

top

Top.


            bottom

Bottom.


            <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#


            <linear-color-stop> = <color> && <length-percentage>?


            <color>

Specifies the color using a keyword or a numerical specification.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <linear-color-hint> = <length-percentage>


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


            <ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.


            <size>

Determines the size of the gradient's ending shape.


            <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


            left

Left.


            center

Center.


            right

Right.

top

Top.


            bottom

Bottom.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#


            <linear-color-stop> = <color> && <length-percentage>?


            <color>

Specifies the color using a keyword or a numerical specification.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <linear-color-hint> = <length-percentage>


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


            <ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.


            <size>

Determines the size of the gradient's ending shape.


            <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


            left

Left.


            center

Center.


            right

Right.

top

Top.


            bottom

Bottom.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#


            <linear-color-stop> = <color> && <length-percentage>?


            <color>

Specifies the color using a keyword or a numerical specification.


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).


            <linear-color-hint> = <length-percentage>


            <length-percentage> = [ <length> | <percentage> ]


            <length>

Specifies the length using a number followed by a unit of measurement.


            <percentage>

Specifies the percentage using a number followed by a percent sign (%).

INITIAL

none

EXAMPLES

NONE

BASIC-SHAPE | INSET

BASIC-SHAPE | CIRCLE

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: circle(50%);
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: circle(50%);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle circle</div>
</body>
</html>

BASIC-SHAPE | ELLIPSE

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: ellipse(50% 25%);
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: ellipse(50% 25%);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse ellipse</div>
</body>
</html>

BASIC-SHAPE | POLYGON

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon polygon</div>
</body>
</html>

BASIC-SHAPE | PATH

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: path("M20,50 L35,100 H120 V50 Q70,10 20,50");
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: path("M20,50 L35,100 H120 V50 Q70,10 20,50");
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path path</div>
</body>
</html>

SHAPE-BOX | BORDER-BOX

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: border-box;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box</div>
</body>
</html>

SHAPE-BOX | PADDING-BOX

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: padding-box;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box padding-box</div>
</body>
</html>

SHAPE-BOX | CONTENT-BOX

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: content-box;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box</div>
</body>
</html>

SHAPE-BOX | MARGIN-BOX

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: none;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: margin-box;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box margin-box</div>
</body>
</html>

IMAGE | URL

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: url(/assets/png/HappyFace.png);
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: url(/assets/png/HappyFace.png);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url url</div>
</body>
</html>

IMAGE | GRADIENT | LINEAR-GRADIENT

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: linear-gradient(45deg, gray, transparent 50px);
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: linear-gradient(45deg, gray, transparent 50px);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient</div>
</body>
</html>

IMAGE | GRADIENT | RADIAL-GRADIENT

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-image: radial-gradient(gray, transparent 50px);
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            clip-path: none;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            shape-outside: radial-gradient(gray, transparent 50px);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <div>radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient radial-gradient</div>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <style>
        .myclass {
            background-color: lightgray;
            background-repeat: no-repeat;
            border-color: gray;
            border-style: dashed;
            border-width: 10px;
            float: left;
            height: 100px;
            margin: 10px;
            padding: 10px;
            width: 100px;
        }
    </style>
    <script>
        function mouseover(value, value2, value3) {
            var element = document.getElementsByClassName("myclass")[0];
            element.style.backgroundImage = "none";
            element.style.clipPath = "none";
            element.style.shapeOutside = value;
            if (value2) {
                element.style.backgroundImage = value;
            }
            if (value3) {
                element.style.clipPath = value;
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value, false, false)" type="button" value="none"><br>
    <button onmouseover="mouseover(value, false, true)" value="inset(10% 20%)">inset</button>
    <button onmouseover="mouseover(value, false, true)" value="circle(50%)">circle</button>
    <button onmouseover="mouseover(value, false, true)" value="ellipse(50% 25%)">ellipse</button>
    <button onmouseover="mouseover(value, false, true)" value="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">polygon</button>
    <button onmouseover="mouseover(value, false, true)" value="path("M20,50 L35,100 H120 V50 Q70,10 20,50")">path</button><br>
    <input onmouseover="mouseover(value, false, false)" type="button" value="border-box">
    <input onmouseover="mouseover(value, false, false)" type="button" value="padding-box">
    <input onmouseover="mouseover(value, false, false)" type="button" value="content-box">
    <input onmouseover="mouseover(value, false, false)" type="button" value="margin-box"><br>
    <button onmouseover="mouseover(value, true, false)" value="url(/assets/png/HappyFace.png)">url</button>
    <button onmouseover="mouseover(value, true, false)" value="linear-gradient(45deg, gray, transparent 50px)">linear-gradient</button>
    <button onmouseover="mouseover(value, true, false)" value="radial-gradient(gray, transparent 50px)">radial-gradient</button><br>
    <div class="myclass"></div>
    <div>shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside shape-outside</div>
</body>
</html>

SHAPE-OUTSIDE

SYNTAX

CSS

JS

VALUES

INITIAL

EXAMPLES

NONE

BASIC-SHAPE | INSET

BASIC-SHAPE | CIRCLE

BASIC-SHAPE | ELLIPSE

BASIC-SHAPE | POLYGON

BASIC-SHAPE | PATH

SHAPE-BOX | BORDER-BOX

SHAPE-BOX | PADDING-BOX

SHAPE-BOX | CONTENT-BOX

SHAPE-BOX | MARGIN-BOX

IMAGE | URL

IMAGE | GRADIENT | LINEAR-GRADIENT

IMAGE | GRADIENT | RADIAL-GRADIENT

JS

LINKS

INTERNAL

EXTERNAL