CSSshape-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 »float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
Definition and Usage
Theshape-outside property lets you define a shape for wrapping for the inline content. By default, inline content wraps around its margin box, withshape-outside you can customize this wrapping.
Theshape-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 forbasic-shape.Read aboutanimatable |
| 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 aninset(),circle(),ellipse(), or apolygon() function |
| url(image) | The float area is based on the alpha channel of the specifiedimage as defined by shape-image-threshold |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
