title: Inset boxshadow alternative for Internet Explorer 8
body: <p>I am very close to getting an inset boxshadow for IE8 without the need for JavaScript.</p>
  
  <p>Here is a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/2kM3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2kM3R.png" alt="enter image description here"></a></p>
  
  <p>Because Internet Explorer 5.5 through 8 only supports Microsoft's "dropshadows" and "shadows" instead of boxshadows, I have to use this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    /* CSS for all browsers.  Note if there is no background-color, the box will be transparent */
    border: solid 1px #808080;
    margin: 10px;
    padding: 10px;
     zoom: 1;
     filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="box"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(The shadow only displays in IE5.5 through 8 because shadows and dropshadows were removed from IE9, replaced by boxshadows).</p>
  
  <p>I am able to remove the shadow from the inside of the box by doing this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    /* CSS for all browsers.  Note there is now a background-color, the box will not be transparent */
    background-color:white;
    border: solid 1px #808080;
    margin: 10px;
    padding: 10px;
     zoom: 1;
     filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="box"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then it looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/Qpy6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qpy6I.png" alt="enter image description here"></a></p>
  
  <p>But how would I be able to make an <strong><em>inset</em></strong> shadow <strong>only</strong>, where the outside shadow is gone?</p>