CSS Border on PNG image with transparent parts

Question

I'm attempting to apply a border to a PNG image I've created (Example included). The problem is that when I apply the border, it creates a box shape around the entire image rather than a precise vector (Meaning it includes the transparent parts in the image).

Is there a way to configure the border so that it ignores the transparent areas? (Even if it isn't in CSS... HTML5/JS?)

Answer 1

 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">

Related Question : How to Add PNG image in HTML