title: CSS: Don't apply multiple drop shadows on top of each other
body: <p>Is there a way to not apply multiple drop shadows on top of each other?  I am trying to use drop shadow to simulate stroke around an element.  I needed to use drop shadow because I needed it to work when we had masks or images with transparent spots in it and I couldn't find another way to accomplish the same thing.  The other alternative of using a background color didn't work for png images with transparency.</p>
  
  <p>The problem is that when I define a drop shadow for the left and top sides for example, instead of making a nice overlap it actually applies extra drop shadow to the element where there was overlap. This ends up with flat edges instead of rounded ones like they should have been.  Note that while this is a rounded image, we allow users to define their own masks and upload png's so it could be just about any shape.</p>
  
  <p>Here is a jsfiddle example of the problem: <a href="https://jsfiddle.net/a67fqne2/17/" rel="nofollow noreferrer">https://jsfiddle.net/a67fqne2/17/</a></p>
  
  <p>The code itself:</p>
  
  <pre><code>&lt;div style="width: 391.6px; height: 369.6px; left: 239.6px; top: 28.9px; position: absolute; cursor: default; z-index: 52;"&gt;
    &lt;div class="imageOuterStyleWrapper"&gt;
      &lt;div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(139, 69, 19) 19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px 19.6px 0px) drop-shadow(rgb(139, 69, 19) -19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px -19.6px 0px); width: calc(100% - 39.16px); height: calc(100% - 39.16px); padding: 19.58px;"&gt;
        &lt;div class="imageInnerStyleWrapper" style="clip-path: url(&amp;quot;#Mask-2&amp;quot;);"&gt;&lt;img style="width: 100%; height: 133.083%; left: 0%; top: -16.5415%;" src="https://plicimgstaging-d6d.kxcdn.com?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2F4dbf8644-0751-4e9f-afaf-f5c4a00f6bae%2Foriginal%2FAbdulKarim-Naeemah-01195-00007.JPG%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Credential%3DAKIAIZ3GLWGI2FROIRRA%252F20180712%252Fus-east-1%252Fs3%252Faws4_request%26X-Amz-Date%3D20180712T165503Z%26X-Amz-SignedHeaders%3DHost%26X-Amz-Expires%3D604800%26X-Amz-Signature%3Dd32c01d8dd7f82206b5f15028fc90a1ff6d5aadd71738648d8e477799e27816b&amp;amp;op=resize,rotate&amp;amp;deg=auto&amp;amp;mode=clip&amp;amp;filter=bilinear&amp;amp;q=90&amp;amp;w=450&amp;amp;plic-ref=plic-books-dev&amp;amp;sig=4ee24d37aa0356fe61c9500d370ca81944338fe5"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;svg width="0" height="0" id="globalMaskDefinitions"&gt;
    &lt;defs&gt;
      &lt;clipPath id="Mask-2" clipPathUnits="objectBoundingBox"&gt;
        &lt;circle x="0" y="0" width="1" height="1" cx=".5px" cy=".5px" r=".5px"/&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>