css - Add inset box-shadow on Google Maps element

Question

I am willing to add some inset box-shadow to a tag that is containing a Google Maps element. However, it seems nothing happens, probably because Google loads some other div's in the original element, hence covering the generated box-shadow.

How can I achieve this effect?

Here's the code I have:

<section id="map-container">
    <figure id="map"></figure>
</section>

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    background-color: #F9FAFC;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

Thank you!

Answer 1

That's how I did it. The following method won't overlap map controls, so you will be able to manipulate the map, i.e. drag, click, zoom, etc.

HTML:

<div class="map-container">
    <div class="map"></div>
</div>

CSS:

.map-container {
    position: relative;
    overflow: hidden;
}
.map-container:before, .map-container:after, .map:before, .map:after {
    content: '';
    position: absolute;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; }
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; }
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; }
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; }

DEMO: http://jsfiddle.net/dkUpN/80/

---

UPDATE: The old solution (see 1^st revision) didn't have pseudo-elements support and was compatible with old browsers. Demo is still available here: http://jsfiddle.net/dkUpN/.