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

Answer 2

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

Answer 3

One way is to not make your box-shadow inset so that it appears outside the box. But if you really want to use an inset box shadow, you can add a padding to the container element equal to the thickness of the shadow:

.a {
  ...
  padding: 2px;
  box-shadow: 0 0 0 2px #000000;
}

Answer 4

Add:

z-index: -1; /** less than the parent in general */

To the child element and it should work.

Answer 5

Give your main element position: relative , then create another div within that element that has:

position: absolute;
width: 100%;
height: 100%;   
box-shadow: inset 0px 0px 0px 2px black;

What this does is it creates an invisible div that goes over your content, then you apply your box-shadow to that div and it will lay on top of all the elements that were previously covering the shadow. It's like placing a sheet of glass with the shadow etched on to its edges over your element.