How to create a white glow border around an image

Question

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

Bluebird

Answer 1

Use CSS (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);
}

Solecism

I think this supports only IE 9+, just add:<meta http-equiv="X-UA-Compatible" content="IE=9" /> to render the page in IE9 and IE10 as version IE9 – Wakerobin

Note that filter has unexpected behaviour in several elements. Apply it to a fieldset and be amazed. Also, it may leak to child elements. And it will show a ActiveX warning for the page with the dreaded yellow bar. Just avoid it. add a flat light grey shadow for IE and be done with. – Franko

Doesn't works with transparent images. Like a round png logo. – Harrisharrisburg

@SantoshKumar, no it doesn't, because the box-shadow can't possibly know where the non-transparent pixels of a png are. It only affects HTML elements, the <img> element itself, not the content. – Solecism

@Solecism drop-shadow can though :) – Loudspeaker

Answer 2

This is probably what you need if you wish to follow the alpha-based borders of your image.

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Support of filter can be verified here.

Wheelhorse

Answer 3

You can do it with box-shadow:

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

See this JSFiddle http://jsfiddle.net/XUC5q/1/, and you can generate from here http://css3generator.com/

If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers & you can use filter as Kyle said like this

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

You can generate your filter from here http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Valdes

Answer 4

Depends on what your target browsers are. In newer ones it's as simple as:

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

For older browsers you have to implement workarounds, e.g., based on this example, but you will most probably need extra mark-up.

Quadric

Answer 5

padding:7px; will give you a nice looking padded in image. The padding will give you a simulated white border (or whatever border you have set). The rgba is just allowing you to do an opacity on the particular color; 0,0,0 being black. You could just as easily use any other RGB color.

Lashoh

This does not answer the question, and should have been a comment under an existing answer (if it was really needed in the first place). – Middlebrow

Answer 6

You can use CSS3 to create an effect like that, but then you're only going to see it in modern browsers that support box shadow, unless you use a polyfill like CSS3PIE. So, for example, you could do something like this: http://jsfiddle.net/cany2/

Keturahkeung