title: Outline Offset substitute on IE
body: <p>I have something like this "<a href="http://jsfiddle.net/sogpgepg/" rel="nofollow">http://jsfiddle.net/sogpgepg/</a>" that works on Chrome and on Firefox. However I noticed the offset doesn't work on Internet Explorer and the outline is outside the picture and not inside it.</p>
  
  <p>After some research I found out that Explorer doesn't support outline-offset!</p>
  
  <p>Is there any way I can get the same effect (inside border) on Internet Explorer?</p>
  
  <p>Script:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div class="inner"&gt;
      &lt;img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container{
      width: 300px;
      height: auto;
      margin: 0;
      padding: 0;
  }
  
      .inner img{
              width: 100%;
  
              outline: 6px solid RGBa(255,0,0, 0.5);
              outline-offset: -6px;
  
              -webkit-transition: all 0.5s ease-in;
              -moz-transition: all 0.5s ease-in;
              -o-transition: all 0.5s ease-in;
              transition: all 0.5s ease-in;
          }
  
          .inner img:hover {
              outline: 6px solid rgba(200,200,200,0);
  
              -webkit-transition: all 0.5s ease-in;
              -moz-transition: all 0.5s ease-in;
              -o-transition: all 0.5s ease-in;
              transition: all 0.5s ease-in;
          }
  </code></pre>