shape-outside

The shape-outsideCSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The shape-outside property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.

Values

none

The float area is unaffected. Inline content wraps around the element's margin box, like usual.

<shape-box>

The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be margin-box, border-box, padding-box, or content-box. The shape includes any curvature created by the border-radius property (behavior which is similar to background-clip).

margin-box

Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the border-radius / marginratio is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)).

border-box

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

padding-box

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

content-box

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

The float area is computed based on the shape created by of one of inset(), circle(), ellipse(), or polygon(). If a <shape-box> is also supplied, it defines the reference box for the <basic-shape> function. Otherwise, the reference box defaults to margin-box.

Note: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.

Interpolation

When animating between one <basic-shape> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as <length>, <percentage>, or calc() where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate.

Both shapes must use the same reference box.

If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.

If both shapes are of type inset(), interpolate between each value in the shape functions.

If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions.

1. From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Desktop

Mobile

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Android webview

Chrome for Android

Edge Mobile

Firefox for Android

Opera for Android

iOS Safari

Samsung Internet

Basic support

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

No support
No

Full support
24

Full support
10.1

Full support
37

Full support
37

?

Full support
62

Full support
62

No support61 — 62

Disabled

Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.