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