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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 ?

62

61 — 621

No2410.1
<image>37 ?

62

61 — 621

No2410.1
<gradient>37 ?

62

61 — 621

No2410.1
inset()37 ?

62

61 — 621

No2410.1
circle()37 ?

62

61 — 621

No2410.1
polygon()37 ?

62

61 — 621

No2410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 ?

62

61 — 621

2410.34.0
<image>3737 ?

62

61 — 621

2410.34.0
<gradient>3737 ?

62

61 — 621

2410.34.0
inset()3737 ?

62

61 — 621

2410.34.0
circle()3737 ?

62

61 — 621

2410.34.0
polygon()3737 ?

62

61 — 621

2410.34.0

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

shape-margin

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 ?

62

61 — 621

No2410.1 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 ?

62

61 — 621

2410.34.0

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

shape-image-threshold

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 ?

62

61 — 621

No2410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 ?

62

61 — 621

2410.34.0

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

Document Tags and Contributors

Last updated by: rachelandrew,