There is a way to accomplish this without utilising canvas, using only CSS, and with only two lines of code.
The secret is to use the css filter and -webkit-filter attributes to draw two drop shadows with no blur, one for the positive and one for the negative axis, which will wrap around the image and provide the (hopefully) desired effect.
Note: CSS filters are not supported at all in Internet Explorer (let's hope Spartan does better), however here is a compatibility chart.
This initial sample will use the most basic border possible.
img {
-webkit-filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 black);
filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 black);
}
body {
background-color: lightcoral;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">
As you can see, some images need a little more tweaking, you can see the right border is a little smaller than the left.
With that in mind, here is the perfected border snippet with just a really tiny value tweak.
img {
-webkit-filter: drop-shadow(2px 1px 0 black)
drop-shadow(-1px -1px 0 black);
filter: drop-shadow(2px 1px 0 black)
drop-shadow(-1px -1px 0 black);
}
body {
background-color: khaki;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">
That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect snippet .
img{
-webkit-filter: drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 white);
filter:drop-shadow(1px 1px 0 black)
drop-shadow(-1px -1px 0 white);
}
body{
background-color:lightblue;
}
<img src="http://i.imgur.com/GZoXRjS.png" width="250">