how to set shadow for round image(css)

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);
}

Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.


shadows are independent of shapes in css, you can use the shadow property for circle after creating circle. You can use the following code for that, it should work fine

.circle{ 
   width:150px;height:150px;
   border: solid 1px #555;
   background-color: #eed;
   box-shadow: 10px -10px rgba(0,0,0,0.6);
   -moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
   -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
   -o-box-shadow: 10px -10px rgba(0,0,0,0.6);
   border-radius:100px;
} 

Tags:

Html

Css