CSS3 box shadow on top of children

Question

How do I get an inset CSS3 box shadow to render on top of its children elements?

Problem:

HTML:

<div id="chatroom">
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
</div>

CSS:

#chatroom{
    border: 1px solid #CCC;
    height: 135px;
    font-size: 0.75em;
    line-height: 1.2em;
    overflow: auto;
    -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
    -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
}
.chatmessage{
    padding: 4px 2px;
}
.chatmessage b{
    margin-right: 2px;
}
.chatmessage:nth-child(2n) {
    background: #EEE;
}

Answer 1

cant be done directly from css.. (it is not shadow if it goes above overlapping elements)

you would need to rework your html a bit by adding a div to overlay the shadow..

<div id="chatroom">
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
    <div class="shadow"></div>
</div>

and your CSS to make the new div have the shadow..

#chatroom{
    border: 1px solid #CCC;
    height: 135px;
    font-size: 0.75em;
    line-height: 1.2em;
    overflow: auto;
    position:relative;
}
.shadow{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
    -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
  }

Answer 2

I recommend using box-shadow along with -moz-box-shadow and -webkit-box-shadow. This is future (and Opera 10.5 ;)) compatible.