Box-shadow of div over inner div

I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here. My HTML is: <div class="wrapper"> <div class="inner"> </div> </div> And CSS: .wrapper { width: 200px; height: 100px; border: 1px grey solid; box-shadow: inset 40px 0 10px -10px #bbbbbb; } .inner{ width: 180px; height: 80px; margin: 10px; background-color: lightblue; } Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.