MDN wants to learn about developers like you:

Our volunteers haven't translated this article into Deutsch yet. Join us and help get the job done!
You can also read the article in English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The shape-margin CSS property adds a margin to shape-outside.

/* <length> values */
shape-margin: 10px;
shape-margin: 20mm;

/* <percentage> value */
shape-margin: 60%;

/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

Initial value0
Applies tofloats
Percentagesrefer to the width of the containing block
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar



Sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.

Formal syntax


<length-percentage> = <length> | <percentage>


Specification Status Comment
CSS Shapes Module Level 1
The definition of 'shape-margin' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ? No No No7 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes ? ? No No No ?

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: fscholz, mfluehr, chrisdavidmills, Sebastianz, rebeccahauck
 Zuletzt aktualisiert von: fscholz,