title: Image shadow css3
body: <p><img src="https://i.stack.imgur.com/tEDtd.png" alt="enter image description here">
  <br><br>
  This is the top of the sketch of my website, I've done this in a HTML editor. <br><br>
  The circle we can see in the image is my logo, it's an image with alpha color background.<br>
  Shadows, borders, etc are working perfectly even in IE.<br><br>
  Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.<br><br>
  box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)<br>
  The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on  all browsers but it's only working with chrome.<br><br>
  On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.</p>
  
  <p>Can anybody give me some help. I would appreciate it. Thanxs<br><hr>
  After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone<br>
  I use dolphin browser and this is what i get:<br>
  <img src="https://i.stack.imgur.com/ssEGT.jpg" alt="mobil phone"><br><br>
  This is my code: css:<br>
      #logo { 
      margin-top: -100px;
      height: 188px; 
      width: 300px;
      background-image: url("../imagenes/logo.png"); 
      border: 5px solid white; 
      border-radius: 50% ;
      box-shadow: 0 10px 15px #000;
      -moz-box-shadow: 0 10px 15px #000; 
      -webkit-box-shadow: 0 10px 15px #000; 
      -ms-box-shadow: 0 10px 15px #000; 
      -o-box-shadow: 0 10px 15px #000; 
      -khtml-box-shadow: 0 10px 15px #000; 
  }<br><br>html:<br>
      &#60;div id="logo">&#60;/div></p>