CSS Shapes describe geometric shapes for use in CSS. For the Level 1 specification, CSS Shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.

Basic example

The example below shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%). This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.

Reference

Properties

Data types

Guides

External Resources

Specifications

Specification Status Comment
CSS Shapes Module Level 1 Candidate Recommendation Initial definition

Browser compatibility

shape-outside

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
<image>Chrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
<gradient>Chrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
inset()Chrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
circle()Chrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
polygon()Chrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

shape-margin

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1
Prefixed
Full support 10.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

shape-image-threshold

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge ? Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 37Edge Mobile ? Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

Document Tags and Contributors

Last updated by: rachelandrew,