shape-outside
Wraps text around a custom shape.
Formal Syntax
none | [ <basic-shape> || <shape-box> ] | <image>
JavaScript Access
// Access via element.style
element.style.shapeOutside = 'none';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| shape-outside | 37 | 62 | 10.1 | 79 |
| border-box | 37 | 62 | 10.1 | 79 |
| circle | 37 | 62 | 10.1 | 79 |
| content-box | 37 | 62 | 10.1 | 79 |
| gradient | 37 | 62 | 10.1 | 79 |
| image | 37 | 62 | 10.1 | 79 |
| inset | 37 | 62 | 10.1 | 79 |
| margin-box | 37 | 62 | 10.1 | 79 |
| none | 37 | 62 | 10.1 | 79 |
| padding-box | 37 | 62 | 10.1 | 79 |
| path | — | — | — | — |
| polygon | 37 | 62 | 10.1 | 79 |
Related Properties
- backdrop-filter
- background-blend-mode
- box-shadow
- clip-path
- clip-rule
- color-interpolation
- color-interpolation-filters
- color-scheme
- filter
- flood-color
- flood-opacity
- forced-color-adjust
- image-orientation
- image-rendering
- isolation
- lighting-color
- mask
- mask-border
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- mix-blend-mode
- object-fit
- object-position
- opacity
- paint-order
- print-color-adjust
- shape-image-threshold
- shape-margin
- stop-color
- stop-opacity
- text-shadow
- object-view-box 🧪
- box-shadow-blur 🚧
- box-shadow-color 🚧
- box-shadow-offset 🚧
- box-shadow-position 🚧
- box-shadow-spread 🚧
- image-resolution 🚧
- mask-border-mode 🚧
- shape-inside 🚧
- shape-padding 🚧
- shape-subtract 🚧
- clip 🗑️
- color-adjust 🗑️