CSS shape-margin, shape-outside not working

Question

CSS shape-margin and shape-outside are not working on my system. I'm using the latest version of Chrome. And the only thing I can think of is that my OS is Windows 7. Should this be an issue?

Here is the JSFiddle. However since it may just be working when you see it on your systems, below is what it looks like on my system. Would appreciate if someone could direct me to a way around the issue (that does not involve upgrading my OS, yet seeing the style as it was intended).

Am using the following code:

<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" 
     style="float: left; max-height: 5em; margin-right: 0.5em; 
            -webkit-shape-margin: 12em; shape-margin: 12em;
            -webkit-shape-outside: circle(50%); shape-outside: circle(50%);">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>

Answer 1

How are the shapes created for shape-outside and shape-margin?

The shape-outside property's reference box is always the margin-box of the element. So when the imaginary circle is drawn with shape-outside property, it is drawn based on the size of element plus its margins. Once the shape is drawn, the shape-margin property is then used to draw a larger shape outside of it.

The below screenshot shows how they actually get created. The innermost circle is the actual image, the lighter blue one which is offset a little from the inner circle is the actual shape that is created using the shape outside property. It is offset slightly from the actual circle shape because again reference is the margin-box and since you've set only a margin-right, it gets offset to the right. The large outer circle is the shape that is drawn based on the shape-margin property. The radius of this circle will be 12em + .25em (margin-right/2) + the actual size of the element (roughly 80px x 80px).

---

Any limits on how large the imaginary shape created for shape-margin can be?

Now, the key thing to note is that the shape that is created by the shape-margin will always be limited to the margin-box of the element and so anything beyond it will get clipped. In this example, the entire shape is outside of the margin-box of the element and thus what we see ends up as just a square.

Source for the above is this HTML5Rocks article:

Remember, the shape is ultimately constrained to the element’s margin-box (the element plus its surrounding margin)

In the below screenshot, the black square (created with a pseudo + a div wrapper) represents what is the margin-box area of the img.

img {
  float: left;
  max-height: 5em;
  margin-right: .5em;
  -webkit-shape-margin: 12em;
  shape-margin: 12em;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

/* added just to indicate where margin box ends */

div {
  position: relative;
}
div:after {
  position: absolute;
  content: '';
  height: 80px;
  width: calc(.5em + 80px); /* 80px is width of element + .5em margin */
  border: 1px solid;
  top: 0px;
  left: 0px;
}

<h2>Example of shape margin</h2>
<div>
  <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
  <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
    ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
    ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>

---

So, what is the solution?

This means for the shape-margin to work properly, the bigger circle (the reference for margin) should be created such that it is contained within the margin-box of the element.

---

Option 1: Set shape-margin lower than margin-right

This can either be done by setting the shape-margin such that it is less than the margin-right like in the below snippet.

img {
  float: left;
  max-height: 5em;
  margin-right: .5em;
  -webkit-shape-margin: .15em;
  shape-margin: .15em;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>

---

Option 2: Set margin-right larger than shape-margin

Or, it could be done by setting a margin-right larger than the shape-margin value like in the below snippet.

img {
  float: left;
  max-height: 5em;
  margin-right: 2.5em;
  -webkit-shape-margin: .25em;
  shape-margin: .25em;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>

But problem with second option is that as the margin-right increases, shape's radius also increases because the margin-box is the reference and so the shape-margin has to be very very smaller than the margin-right.

---

Option 3: Set shape outside's reference as border-box and shape-margin same as margin-right

Or,another option would be to set the reference box of shape-outside property to border-box of the img element. This would mean the size of shapes don't get affected by margins.

Another advantage of setting border-box as reference for the shape-outside property is that shape is not drawn at on offset (as margins again doesn't affect it).

img {
  float: left;
  max-height: 5em;
  margin-right: 12em;
  -webkit-shape-margin: 12em;
  shape-margin: 12em;
  -webkit-shape-outside: circle(50%) border-box;
  shape-outside: circle(50%) border-box;
}

<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
  ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>

Note: There is actually a circular shape margin in the above snippet but that is not seen clearly because a portion of such a large circle is invariably almost a straight line. You can see the circle through Dev tools.