coderef

shape-outsideBaseline · Widely available

The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–36Not supported
37+Supportedsince Aug 26, 2014
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–61Not supported
62+Supportedsince Sep 5, 2018
Current: 157
Safari
1–10Not supported
10.1+Supportedsince Mar 27, 2017
Current: 27
MobileChrome Android
18–36Not supported
37+Supportedsince Sep 3, 2014
Current: 155
Firefox Android
4–61Not supported
62+Supportedsince Sep 5, 2018
Current: 157
Safari iOS
1–10Not supported
10.3+Supportedsince Mar 27, 2017
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: shape-image-threshold.

Feature detection

CSS · check before using
@supports (shape-outside: initial) {
  /* styles that rely on shape-outside */
}

/* or in JavaScript */
if (CSS.supports("shape-outside", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (11). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
shape-image-threshold37796210.1376210.3
shape-image-threshold.percentages787970✕7879✕
shape-margin37796210.1376210.3
shape-outside37796210.1376210.3
shape-outside.circle37796210.1376210.3
shape-outside.gradient37796210.1376210.3
shape-outside.image37796210.1376210.3
shape-outside.inset37796210.1376210.3
shape-outside.none37796210.1376210.3
shape-outside.path149149✕✕149✕✕
shape-outside.polygon37796210.1376210.3