shape-outside

The shape-outside CSS 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

<!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>
    <p>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</p>
</body>
</html>

2 · 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>
    <p>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</p>
</body>
</html>

3 · basic-shape · inset

4 · 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>
    <p>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</p>
</body>
</html>

5 · 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>
    <p>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</p>
</body>
</html>

6 · image · gradient · linear-gradient

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            background-color: lightgray;
            background-image: linear-gradient(135deg, yellow, 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(135deg, yellow, transparent 50px);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <p>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</p>
</body>
</html>

7 · image · gradient · radial-gradient

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            background-color: lightgray;
            background-image: radial-gradient(yellow, 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(yellow, transparent 50px);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <p>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</p>
</body>
</html>

8 · image · url

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            background-color: lightgray;
            background-image: url(/assets/svg/HappyFace.svg);
            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/svg/HappyFace.svg);
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="myclass"></div>
    <p>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</p>
</body>
</html>

9 · none

10 · 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>
    <p>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</p>
</body>
</html>

11 · 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>
    <p>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</p>
</body>
</html>

12 · 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>
    <p>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</p>
</body>
</html>

13 · 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>
    <p>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</p>
</body>
</html>

14 · JS · Inline

<!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>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button><br>
    <button onmouseover="myfunction(value)" value="circle(50%)">circle</button>
    <button onmouseover="myfunction(value)" value="ellipse(50% 25%)">ellipse</button>
    <button onmouseover="myfunction(value)" value="inset(40% 20%)">inset</button>
    <button onmouseover="myfunction(value)" value="path('M20,50 L35,100 H120 V50 Q70,10,20,50')">path</button>
    <button onmouseover="myfunction(value)" value="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">polygon</button><br>
    <button onmouseover="myfunction(value)" value="linear-gradient(135deg, yellow, transparent 50px)">linear-gradient</button>
    <button onmouseover="myfunction(value)" value="radial-gradient(yellow, transparent 50px)">radial-gradient</button>
    <button onmouseover="myfunction(value)" value="url(/assets/svg/HappyFace.svg)">url</button><br>
    <button onmouseover="myfunction(innerHTML)">none</button><br>
    <button onmouseover="myfunction(innerHTML)">border-box</button>
    <button onmouseover="myfunction(innerHTML)">content-box</button>
    <button onmouseover="myfunction(innerHTML)">margin-box</button>
    <button onmouseover="myfunction(innerHTML)">padding-box</button><br>
    <div class="myclass"></div>
    <p>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</p>
    <script>
        function myfunction(myparameter)
        {
            const mystyle = document.querySelector(".myclass").style;
            mystyle.backgroundImage = "none";
            mystyle.clipPath = "none";
            mystyle.shapeOutside = myparameter;
            if(myparameter.includes("gradient") || myparameter.includes("url"))
            {
                mystyle.backgroundImage = myparameter;
            }
            else if(myparameter.includes("circle") || myparameter.includes("ellipse") || myparameter.includes("inset") || myparameter.includes("path") || myparameter.includes("polygon"))
            {
                mystyle.clipPath = myparameter;
            }
        }
    </script>
</body>
</html>

15 · JS · Internal

<!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>
</head>
<body>
    <button>initial</button><br>
    <button value="circle(50%)">circle</button>
    <button value="ellipse(50% 25%)">ellipse</button>
    <button value="inset(40% 20%)">inset</button>
    <button value="path('M20,50 L35,100 H120 V50 Q70,10,20,50')">path</button>
    <button value="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">polygon</button><br>
    <button value="linear-gradient(135deg, yellow, transparent 50px)">linear-gradient</button>
    <button value="radial-gradient(yellow, transparent 50px)">radial-gradient</button>
    <button value="url(/assets/svg/HappyFace.svg)">url</button><br>
    <button>none</button><br>
    <button>border-box</button>
    <button>content-box</button>
    <button>margin-box</button>
    <button>padding-box</button><br>
    <div class="myclass"></div>
    <p>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</p>
    <script>
        function myfunction(myparameter)
        {
            const mystyle = document.querySelector(".myclass").style;
            mystyle.backgroundImage = "none";
            mystyle.clipPath = "none";
            mystyle.shapeOutside = myparameter;
            if(myparameter.includes("gradient") || myparameter.includes("url"))
            {
                mystyle.backgroundImage = myparameter;
            }
            else if(myparameter.includes("circle") || myparameter.includes("ellipse") || myparameter.includes("inset") || myparameter.includes("path") || myparameter.includes("polygon"))
            {
                mystyle.clipPath = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

1 · basic-shape · circle

2 · basic-shape · ellipse

3 · basic-shape · inset

4 · basic-shape · path

5 · basic-shape · polygon

6 · image · gradient · linear-gradient

7 · image · gradient · radial-gradient

8 · image · url

9 · none

10 · shape-box · border-box

11 · shape-box · content-box

12 · shape-box · margin-box

13 · shape-box · padding-box

14 · JS · Inline

15 · JS · Internal

Links

Properties

External