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.
Reference
Properties
Data types
Guides
External Resources
Specifications
shape-outside
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
<image> |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
<gradient> |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
inset() |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
circle() |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
polygon() |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
<image> |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
<gradient> |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
inset() |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
circle() |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
polygon() |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
shape-margin
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 Prefixed
- 10.1
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
shape-image-threshold
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
37 |
? |
62
- 62
- 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.
|
No |
24 |
10.1 |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
37 |
37 |
? |
62
- 62
- 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.
|
24 |
10.3 |
4.0 |
Legend
- Full support
- No support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.