Box-Shadow over child elements?

If you want a solution in which you don't need any extra markup, you can use the ":before" pseudo class selector: http://jsfiddle.net/7rRsw/8/

HTML

<div class="a"><div class="b">No extra markup needed</div></div>

CSS

.a {
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    position: relative;
}

.a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
}

.b {
    width: 200px;
    height: 100px;
    background-color: yellow;
}

It is because your box shadow is inset. Meaning it will appear inside the box.
Whilst your nested div will cover it. Using a border applies to the outside of the "box".
Removing the inset from your CSS will cause the effect you are after.
See updated fiddle with inset remove. fiddle

box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;

UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.

.a{
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
}

.b {
    width: 196px;
    height: 100px;
    background-color: yellow;
    margin:2px auto 0 auto;
}

UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.

HTML

<div class="a">
    <div class="b">How it is (Yellow div covers the box shadow)</div>
    <div class="shadow">&nbsp;</div>
</div>

CSS

.a{
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    position:relative;
}

.b {
    width: 200px;
    height: 100px;
    background-color: yellow;
}

.shadow {
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
    position:absolute;
    top:0;
    width:200px;
    height:200px;
}