Inset box-shadow not following the curve

Question

ISSUE FIDDLE 1

This is the fiddle in question : Fiddle 1

#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;
}

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

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.

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 :

enter image description here

This is the output instead :

enter image description here

ISSUE FIDDLE 2

This is another example of box-shadow not following the curve. This one's without x-y offsets. Fiddle 2

div {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 0px 0px 0 70px green;
}

<div></div>

In this case, pink area should be a quadrant, but looks like a triangle.

enter image description here

Why is inset box-shadow losing the curve as the spread radius increases? is it a bug? It seems not to be one as all major browsers give the same output.

the center point of every inner circle you created with the shadow is moving, so the arc can't follow the curve of the outer circle. You should also be able to scale down the inner circles. Have you ever tried to play with train models and do a two-tracks circuit with a curve? you need to have different curved pieces with a shorter radius: f.tqn.com/y/modeltrains/1/L/3/-/-/-/Curves.png — Fabrizio Calderan
Thanks @FabrizioCalderan . the first issue was very naive. could you explain the second one? — Max Payne

Joshua Whitley Joshua Whitley · Accepted Answer · 2015-03-24T14:34:16

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.

Inset box-shadow not following the curve

1 Answers