CSS shape-outside property

Definition and Usage

shape-outside The property allows you to define a wrapping shape for inline content. By default, inline content is wrapped around its margin box, and using shape-outside, you can customize this wrapping method.

shape-outside The property defines the floating area of the floating element. This floating area defines the shape around which inline content floating elements are wrapped.

Example

Make inline content wrap around the image in a circular shape:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Try It Yourself

CSS Syntax

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

Property Value

Value Description
none Default. The floating area is not affected. Inline content is wrapped around the element's margin box.
margin-box Define the shape enclosed by the margin edge outside the margin.
border-box Define the shape enclosed by the border edge outside the border.
padding-box Define the shape enclosed by the padding edge outside the padding.
content-box

Define the shape enclosed by the content edge.

Each corner radius of this box is 0 or the larger value of border-radius - border-width - padding.
basic-shape The floating area is based on the shape defined by the inset(), circle(), ellipse(), or polygon() functions.
url(image) The floating area is based on the alpha channel of the specified image, defined by shape-image-threshold.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none
Inheritance: No
Animation: yes for basic-shape. Read about animatable
Version: CSS Shapes Module Level 1
JavaScript Syntax: object.style.shapeOutside="circle(50%)"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24