title: Image not filling border-radius
body: <p>I added a border radius to my users Gravatar image and made sure to add the correct CSS for chrome and safari extensions but the image does not fill in the entire circle all the way. It however displays in Firefox correctly.  Here is my CSS along with some images of the problem.</p>
  
  <pre><code>.gravatar{float: left; text-align: center; 
  margin-top:1px; border:2px solid white;background-color:#ffffff;-webkit-border-radius:55%;-moz-border-radius:55%;border-radius:55%;box-shadow:0 0 10px rgba(0,0,0,0.3);
  height: 38px;
  width: 38px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ta6Bh.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/uuVyD.jpg" alt="enter image description here"></p>
  
  <p>The only other mention of gravatar in the CSS is</p>
  
  <pre><code>.gravatar {
      padding: 0px;
      display: inline;
  
  }
  </code></pre>
  
  <p>in my Bootstrap.min.css</p>
  
  <p>I am calling the image from Gravatar by PHP</p>
  
  <pre><code>&lt;a href="users.php?uid=&lt;?php echo $row['user_id']; ?&gt;"&gt;&lt;?php echo $generic-&gt;get_gravatar($email, true, 200, 'mm', 'g', array('style' =&gt; '1')); ?&gt; &lt;?php echo $row['username']; ?&gt;&lt;/a&gt;&lt;?php echo $admin . $restrict; ?&gt;
  </code></pre>
  
  <p>Thanks for any solution you have.</p>