CSS Shapes

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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge MobileNo support
No

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

Prefixed

Full support
10.1

Prefixed

Prefixed Implemented with the vendor prefix: -webkit-

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge Mobile
?

Firefox AndroidFull support
62

Full support
62

No support61 — 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.

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.

IENo support
No

OperaFull support
24

SafariFull support
10.1

WebView AndroidFull support
37

Chrome AndroidFull support
37

Edge Mobile
?

Firefox AndroidFull support
62

Full support
62

No support61 — 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.