Atributo CSS shape-outside

Definition and Usage

shape-outside The property allows you to define the 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 the inline content floating element is wrapped.

Example

Let 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;

Attribute Value

Value Description
none Default. The floating area is not affected. Inline content is wrapped around the margin box of the element.
margin-box Defines the shape surrounded by the margin edge outside the margin.
border-box Defines the shape surrounded by the border edge outside the border.
padding-box Defines the shape surrounded by the padding edge outside the inner padding.
content-box

Defines the shape surrounded by the content edges.

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 Creation: 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 first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24