Inset Box-shadow Not Following The Curve

ISSUE FIDDLE 1 This is the fiddle in question : Fiddle 1 In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equa

Solution 1:

This is not a bug but a correct implementation of box-shadow. Because the outside border-radius is a curve with a 200px height (100% of the box height) and it is the outer-most object being used for the tracing of the first inset box-shadow, the first curve is as you'd expect. The 2nd, however, has to draw a line that is on the outside of a circle with a 200px radius. However, since the 2nd box-shadow is inset further, less of the circumference of that circle will be shown, making it appear to be closer to a straight line. The further each box-shadow is inset, the closer to a straight line it appears because you're seeing less and less of the edge of the next 200px-radius circle.

If you uncomment the #wrapper CSS in this fiddle: http://jsfiddle.net/31xLprkv/1/, you will see the same effect. Because SO requires code with a Fiddle URL, here's the code from it:

HTML

<div id="wrapper">
    <div id="one"></div>
</div>

CSS

/*#wrapper {
    height: 200px;
    width: 200px;
    overflow: hidden;
}*/

#one {
    height: 200px;
    width: 200px;
    margin: 120px;
    border-radius: 200px 0 0 0;
    background-color: plum;
    box-shadow: -40px -40px red, -80px -80px blue, -120px -120px green;
    float: left;
}

Because border-radius only causes a single curve that is a set radius and because box-shadow will only ever reproduce an exact copy of the rendered border-radius behind the existing element, you will not be able to implement your desired effect with just box-shadow.