CSS Filters to create a solid border around an object

Question

Description of Problem (Fiddle):

I'm attempting to make a solid border around a PNG with transparency, so box-shadow is not an option (as it would simply shadow the square corners of the image).

How can I get a filter: drop-shadow() to create a border around the entire element without resorting to blurring or spreading the shadow? Can I apply multiple filters to the same element to achieve this effect? Or is there another way to accomplish this?

Code:

#object {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;
}

.shadow {
  -webkit-filter: drop-shadow(5px 5px white);
}

Answer 1

Update Oh look I did something!... My answer still stands

So, it sounds like the question you're really asking is "How can I add a stroke to a non-square image using CSS", and my answer would be - you can't. As you've found out, it looks like webkit is able to achieve some nice affects with filter, but that won't work on Firefox or IE, so I don't really see the point in exploring filters further (unless you're entire audience are using Webkit/Blink).

My suggestion would just be to edit the images yourself. Perhaps you could recruit a server-side library such as GD or ImageMagick (probably bad solutions, but that's all I know for PHP) to handle the automation.

Answer 2

I agree with @Ian, but if you don't care about non-Webkit web browsers which don't support CSS filters, you could duplicate the image and use a combination of grayscale() and brightness() functions to fake the effect.

For instance:

<div class="shadow">
    <img id="object" src="http://i.stack.imgur.com/yZgGX.png" />
</div>

div.shadow:before {
    content: url(http://i.stack.imgur.com/yZgGX.png);

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;

    z-index: 1;
    -webkit-filter: grayscale(100%) brightness(100);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

Example Here.