How to draw a border around a semitransparent image? (css)

Question

I was wondering how to draw a border around an image that is semitransparent, that is, I do not want a box-shaped border, nor a border radius, but a border that actually applies to the shape of the image itself.

According to this post it's not possible, and this one simply suggest to edit the image in some photo editing program such as Photoshop.

But what if the image input isn't mine? If I needed to process a series of user-inputed images to my website and add that border, the software option wouldn't work.

One way to tackle that would be to use canvas, but isn't there a pure, simple, css way of doing this? Thanks.

@web-tiki It's not, mine is better formulated and would probably match closer to what someone with this problem would search, "*if those answers do not fully answer your questions..ask a new question*", well they didn't, so can you undo that? — undefined, Jan 31 '15 at 19:58
the question is the same as the duplicate : *"adding border around a semi transparent image"*. Adding your answer there is better than asking a new one to post it. — web-tiki, Feb 01 '15 at 13:58

score 5 · Accepted Answer · edited May 23 '17 at 11:45

As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.

The trick is using the css filter and -webkit-filter properties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.

Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table. (Thanks web-tiki)

This first snippet (fiddle) will apply the simplest 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="https://i.stack.imgur.com/Ju44K.jpg" width="250">

As you can see, some images (like this awesome baymax render) 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 (fiddle) 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="https://i.stack.imgur.com/Ju44K.jpg" width="250">

That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect snippet (fiddle).

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="https://i.stack.imgur.com/Ju44K.jpg" width="250">

Hope this helps anyone wondering about the possibility of a wrap-around border for semitransparent images!

Intersting, although you should specify that the `filter` property has the "working draft" status and that IE doesn't support it at all. — web-tiki, Jan 31 '15 at 10:16
I would suggest you add your answer in the duplicate question. — web-tiki, Jan 31 '15 at 10:21
@web-tiki added a note with informing about the ie problem and posted my answers in both other questions, although I really don't think mine is a duplicate :) — undefined, Jan 31 '15 at 20:01

How to draw a border around a semitransparent image? (css)

1 Answers1