Box-Shadow over child elements?

Question

I need to make my box-shadow appear like a border: If I have a parent with a inset boxshadow and I put a child div in it, the box shadow should go over the child div like shown here with borders:

jsFiddle: http://jsfiddle.net/7rRsw/2/

Is there anything like a z index for this problem, or a css hack?

Thanks

EDIT: I need to use box shadow inset + no borders or box seizings. I am searching for hacks to make this possible only with box shadow. A possible hack would be to add box shadows left and right on the child div.

Answer 1

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