Merge Two "DIV" and Box Shadow - merge

Question

Is this possible to merge a round and a square div and show single box-shadow in css3? I know we can hide single side of border of any div. But my need is different:
Example Image
If this is possible, how can I achieve it?

Answer 1

you actually only need a single div, then can make use of positioning on its :before and :after pseudo elements (the below CSS is a starting point):
Demo Fiddle
CSS
div, div:before {
height:50px;
-webkit-box-shadow: 0 0 4px 0 #424242;
box-shadow: 0 0 4px 0 #424242;
position:relative;
margin-top:200px;
}
div:before {
height:100px;
margin-top:0;
width:100px;
display:block;
background:white;
position:absolute;
top:-25px;
left:100px;
content:'';
border-radius:100%;
}
div:after {
height:100%;
width:100%;
display:block;
background:white;
position:absolute;
top:-0;
left:0;
content:'';
}

Answer 2

Here i come with a very similar answer. with the use of z-index to make sure it works fine and that eventually, content is seen :)
<div class="shaped"> </div>
CSS
.shaped {
margin:2em 0;
box-shadow:0 0 5px;/* will be inherited by pseudo under */
height:2em;
position:relative;
background:white;/* will be inherited by pseudo on top */
}
.shaped:before, .shaped:after {
content:'';
position:absolute;
height:2em;
width:2em;
padding:1em;
background:inherit;
border-radius:100%;
margin:-1em 2em;
z-index:1;
}
.shaped:before {
box-shadow:inherit;
z-index:-1;
}
.shaped>* {/* let's see whatever comes inside */
position:relative;
z-index:2;
}