how to set shadow for round image(css)

Question

I\'m new to shadow in css can we set shadows for round image(i mean to a circle image).

if it is possible, please give me a code for this in css. thanks in advan

Answer 1

There is great tutorial for box-shadowing with examples here

Also, simple css3 for rounding corners in cross browser

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

just adjust the pix to the corner roundness you want, or use ems instead

Answer 2

Easy peasy! Set border-radius: 50%; on your image element.

It rounds your image tag and it's drop-shadow.

Answer 3

This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency). You could make a circle with CSS3 and give a shadow, see this jsFiddle.

div {
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    margin: 20px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}

Answer 4

There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...) Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/