shape-margin CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The shape-margin CSS property sets a margin for a CSS shape created using shape-outside.

Try it

shape-margin: 0;
shape-margin: 20px;
shape-margin: 1em;
shape-margin: 5%;
<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o'clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up "ballooning"
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of "automobiling" at a breakneck speed, the
    members of the "Aéro Club" now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>
.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  margin: 20px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: rebeccapurple;
  shape-outside: circle(50%);
}

The margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content.

Syntax

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

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

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

Values

<length-percentage>

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

Formal definition

Initial value0
Applies tofloats
Inheritedno
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();

Formal syntax

shape-margin = 
<length-percentage [0,∞]>

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

Examples

Adding a margin to a polygon

HTML

html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>

CSS

css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

Result

Specifications

Specification
CSS Shapes Module Level 1
# shape-margin-property

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shape-margin
Chrome – Full support
Chrome 37 (Release date: 2014-08-26)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 62 (Release date: 2018-09-05)
footnote Full support
Opera – Full support
Opera 24 (Release date: 2014-09-02)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
prefix
prefix Implemented with the vendor prefix: -webkit-
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 37 (Release date: 2014-09-03)
footnote Full support
Firefox for Android – Full support
Firefox for Android 62 (Release date: 2018-09-05)
footnote Full support
Opera Android – Full support
Opera Android 24 (Release date: 2014-09-10)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 3 (Release date: 2015-04-10)
footnote Full support
WebView Android – Full support
WebView Android 37 (Release date: 2014-09-03)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also