title: Box shadow around rounded corners?
body: <p>I'm using Twitter's Bootstrap library to quickly throw together a prototype.</p>
  
  <p>Here's what my layout looks like in HTML:</p>
  
  <pre><code>&lt;div class="navbar-messages container"&gt;
      &lt;div class="alert alert-info fade in"&gt;
          &lt;button class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
          &lt;strong&gt;Awesomeness!&lt;/strong&gt; You're pretty cool.
      &lt;/div&gt;
      &lt;div class="alert alert-error fade in"&gt;
          &lt;button class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
          &lt;strong&gt;Awesomeness!&lt;/strong&gt; You're pretty cool.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's what my LESS looks like:</p>
  
  <pre><code>div.navbar div.navbar-messages {
      .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2));
  
      div.alert {
          -webkit-border-radius: 0px;
          -moz-border-radius: 0px;
          border-radius: 0px;
  
          margin-bottom: 0px;
  
          &amp;:last-child {
              -webkit-border-bottom-right-radius: 4px;
              -webkit-border-bottom-left-radius: 4px;
              -moz-border-radius-bottomright: 4px;
              -moz-border-radius-bottomleft: 4px;
              border-bottom-right-radius: 4px;
              border-bottom-left-radius: 4px;
          }
      }
  }
  
  .drop-shadow(@params) {
      -moz-box-shadow: @params;
      -webkit-box-shadow: @params;
      box-shadow: @params;
  }
  </code></pre>
  
  <p>What's really weird is that the drop shadow isn't curving around the child element's curved corners:</p>
  
  <p><img src="https://i.stack.imgur.com/DaGeM.png" alt="enter image description here"></p>
  
  <p>How can I make it properly curve around the corners?</p>