title: Inset box-shadow not following the curve
body: <p><strong>ISSUE FIDDLE 1</strong></p>
  
  <p>This is the fiddle in question : <strong><a href="http://jsfiddle.net/31xLprkv/" rel="nofollow noreferrer">Fiddle 1</a></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#one {
      height: 200px;
      width: 200px;
      border-radius: 100% 0 0 0;
      background-color: plum;
      box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equal width, producing a quadrant.</p>
  
  <p>Now I added 3 inset box-shadows to the main element with x,y offsets. I expect the box-shadows to follow the curve, and be parallel to each other, like this :</p>
  
  <p><img src="https://i.stack.imgur.com/EFi6A.png" alt="enter image description here"></p>
  
  <p>This is the output instead : </p>
  
  <p><img src="https://i.stack.imgur.com/Ni4Yn.png" alt="enter image description here"></p>
  
  <hr />
  
  <p><strong>ISSUE FIDDLE 2</strong></p>
  
  <p>This is another example of box-shadow not following the curve. This one's without x-y offsets. <a href="http://jsfiddle.net/bp1jr2ku/" rel="nofollow noreferrer">Fiddle 2</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      height: 200px;
      width: 200px;
      border-radius: 100% 0 0 0;
      background-color: plum;
      box-shadow: inset 0px 0px 0 70px green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this case, pink area should be a quadrant, but looks like a triangle.</p>
  
  <p><img src="https://i.stack.imgur.com/zvC8u.png" alt="enter image description here"></p>
  
  <p>Why is inset box-shadow losing the curve <strong>as the spread radius increases?</strong> is it a bug? It seems not to be one as all major browsers give the same output.</p>