CSS: create white glow around image

image css border glow
tamir picture tamir · Jun 21, 2011 · Viewed 209k times · Source

How can I create a white glow as the border of an unknown size image?

Answer

Kyle picture Kyle · Jun 21, 2011

Use simple CSS3 (not supported in IE<9)

img
{
    box-shadow: 0px 0px 5px #fff;
}

This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)

If you're worried about the users that don't have the latest versions of their browsers, use this: 

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

For IE you can use a glow filter (not sure which browsers support it)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Play with the settings to see what suits you :)

Related questions

Remove white space below image

In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below). I've tried everything I can think of in Firebug with no luck. How can I …

Read More
Removing the image border in Chrome/IE9

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS: outline: none; border: none; Using jQuery, I also added a border=0 attribute on every image tag. But …

Read More
Inner border over images with CSS?

I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There …

Read More