Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set shadow for round image(css)

Tags:

html

css

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 advance

like image 212
FreshBits Avatar asked Mar 21 '12 15:03

FreshBits


1 Answers

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);
}
like image 174
Frank van Wijk Avatar answered Nov 10 '22 13:11

Frank van Wijk