Clipping a circle box-shadow where it overlaps square <div>

Question

Consider the following -

#banner {
    width: 100%;
    height: 50px;
    box-shadow: 0 0 10px #000000;
    background: #63B0F2;
}

#circle {
    position: relative;
    top: 20px;
    height: 80px;
    width: 80px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 10px #000000;
    background-color: white;
}

<div id="banner">
    <div id="circle">
    </div>
</div>

Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?

To put it another way, so there is only shadow cast onto the background, but not each other?

Answer 1

Add a second element for the shadow and position it behind the banner using z-index.

.shadow, 
.circle {
  display: block;
  height: 120px;
  width: 120px;
  position: absolute;
  bottom: -100%;
  left: calc(50% - 62px);
  border-radius: 50%;
}
.shadow {
  box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
  border: 2px solid transparent;
  z-index: -1;
}
.circle {
  background: #e0e0e0;
  border: 2px solid white;
}

See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100