CSS shape-outside Property
Example
Let the inline content wrap in a circle around an image:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
Try it Yourself »
Definition and Usage
The shape-outside
property
lets you define a shape for wrapping for the inline content. By default, inline content wraps
around its margin box, with shape-outside
you
can customize this wrapping.
The shape-outside
property
defines the float area for float elements. This float area defines the shape
around which inline content float elements wrap.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | yes for basic-shape. Read about animatable |
Version: | CSS Shapes Module Level 1 |
JavaScript syntax: | object.style.shapeOutside="circle(50%)" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
shape-outside | 37 | 79 | 62 | 10.1 | 24 |
CSS Syntax
shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
none | This is default. The float area is unaffected. Inline content wraps around the element's margin box | |
margin-box | Defines the shape enclosed by the outside margin edge | |
border-box | Defines the shape enclosed by the outside border edge | |
padding-box | Defines the shape enclosed by the outside padding edge | |
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 | |
basic-shape | The float area is based on the shape of an inset(), circle(), ellipse(), or a polygon() function | |
url(image) | The float area is based on the alpha channel of the specified image as defined by shape-image-threshold | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |