title: Add inset box-shadow on Google Maps element
body: <p>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.</p>
  
  <p>How can I achieve this effect?</p>
  
  <p>Here's the code I have:</p>
  
  <pre><code>&lt;section id="map-container"&gt;
      &lt;figure id="map"&gt;&lt;/figure&gt;
  &lt;/section&gt;
  
  #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;
  }
  </code></pre>
  
  <p>Thank you!</p>