CSS Border on PNG image with transparent parts

Question

Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not

Answer 1

Three years on the question is still valid. As I (originally) wanted a thicker stroke, I ended up using 8 drop shadows (one for each point of the compass) to get it looking just so.

Strangely, using 8 shadows with an x- and y- offset of 1px yields an outline which looks about 5px wide, but introducing transparency into the colour seems to help dial this back to a slightly soft but quite attractive result:

img {
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: rgba(0, 255, 0, 0.2);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));   
}

As you can see, CSS variables come in handy here (or Sass / Less).