Outline Offset substitute on IE - html

Question

I have something like this "http://jsfiddle.net/sogpgepg/" 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.
After some research I found out that Explorer doesn't support outline-offset!
Is there any way I can get the same effect (inside border) on Internet Explorer?
Script:
HTML
<div id="container">
<div class="inner">
<img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
</div>
</div>
CSS
#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;
}

Answer 1

Here is an alternate for IE as shown in "http://css-tricks.com/"
Code:
<div class="inner-border">
Transparent Inside Border
</div>
CSS
.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
JSFiddle Demo of the Above Code
Here is another example of Transparent Inside Border:
http://jsfiddle.net/chriscoyier/DvaqK/4/
Hope this will help!

Answer 2

One possible work around is to use an inset shadow.
I modified your fiddle somewhat.
http://jsfiddle.net/sogpgepg/1/
The changes I made are:
Make the <img> a background-image on .inner.
Move all styles from .inner img up to .inner
By setting the blur radius to 0 and specifying the spread radius, you can get a hard-edge 'border'.
This link includes more information on using shadows (particularly inset shadows): http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/
Code:
#container {
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner{
width: 300px;
height:200px;
background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
-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:hover {
box-shadow: inset 0px 0px 0px 6px 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;
}