Widely available Supported across all major browsers. Safe to use in production.

shape-outside

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

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
shape-outside
37
79
62
10.1
37
10.3
Other
css.properties.shape-image-threshold

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
37
79
62
10.1
37
10.3
CSS property
percentages

Support for percentage opacity values
78
79
70
78
Other
css.properties.shape-margin

The shape-margin CSS property sets a margin for a CSS shape created using shape-outside.
37
79
62
10.1
37
10.3
CSS property
circle

The CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
37
79
62
10.1
37
10.3
gradient

The CSS data type is a special type of image that consists of a progressive transition between two or more colors.
37
79
62
10.1
37
10.3
image

The CSS data type represents a two-dimensional image.
37
79
62
10.1
37
10.3
inset

The CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
37
79
62
10.1
37
10.3
none
37
79
62
10.1
37
10.3
path

The path() CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a basic-shape data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute.
polygon

The CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
37
79
62
10.1
37
10.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10.1)

Syntax

CSS 
/* Circular wrapping */
.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 1rem;
}

/* Polygonal wrapping */
.angled {
  float: right;
  width: 300px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

Live demo

Circle() Times clip

shape-outside Circle() times clip demo.

PreviewFullscreen

Ellipse() Times clip

shape-outside Ellipse() times clip demo.

PreviewFullscreen

Polygon() Times clip

shape-outside Polygon() times clip demo.

PreviewFullscreen

Use cases

  • Using shape-outside

    The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links