CODEWITHSUNDEEP
htmlimagecss
Uri Haramati
Uri Haramati

Reputation: 56

Add inner shadow to a circle image inline css

I'm trying to add inner shadow to a circle image. Since it's written for an html email, it's inline css.

I have this:

<td style="border:3px solid #ffffff;border-radius: 50px 50px;box-shadow: 0 0 20px 0px #000000 inset">
 <span><img style="border-radius: 50px 50px;" src="http://media.futuresmag.com/futuresmag/article/2012/05/15/dec29facebook-logo-crop-96x96.jpg"></span>
</td>

I get the circle part and the white border, I'm also getting a tiny black border that should be the shadow.

Who knows how to solve that?

(I picked a facebook icon for illustration)

Tnx!

Upvotes: 1

Views: 3088

Answers (1)

Valentin
Valentin

Reputation: 2858

Ok, maybe you could try doing something like this:

<div style="border-radius: 50px 50px;
            background:url(http://media.futuresmag.com/futuresmag/article/2012/05/15/dec29facebook-logo-crop-96x96.jpg);
            width:96px;height:96px;
            box-shadow: inset 0 0 5px 5px #f00;">
</div>

Instead of using an IMG I used a div with a background image, this way the box shadow I'm using gets applied on top of the image.

Upvotes: 3

Related Questions