Image not filling border-radius

Question

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.

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

The only other mention of gravatar in the CSS is

.gravatar {
    padding: 0px;
    display: inline;

}

in my Bootstrap.min.css

I am calling the image from Gravatar by PHP

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

Thanks for any solution you have.

Answer 1

From what I can tell, it's not so much a problem of the image not filling the border radius, but rather one of how the browsers render the border. If you change the colour of the border to something different to the image, you can see that in fact, the border is drawn under the image when drawn in Chrome. A potential fix is to wrap the image with a div, and put the border on that div.

I used a 16x16 image and got the same sort of result you did... At first. I wrapped it with a div and the problem goes away.

.gravatar
{
    float: left; 
    text-align: center; 
    margin-top: 1px; 
    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;
}
.gravWrap
{
    display:inline-block;
    border-radius: 55%;
    border: solid 2px blue;
}

<div class='gravWrap'><img class='gravatar' src='img/rss16.png'/></div>

EDIT: You could output that markup like so:

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><div class='gravWrap'><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></div> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

Answer 2

You could wrap the img tag with a span and apply those styles to that span instead. Then, add overflow: hidden and that should work in WebKit.

http://jsfiddle.net/Kg4Z3/1/

PHP code:

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><span class="gravatar-wrapper"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></span> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

and the CSS:

.gravatar-wrapper {
    background-color: #fff;
    border: 2px solid #fff;
    -webkit-border-radius: 55%;
    -moz-border-radius: 55%;
    border-radius: 55%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    float: left;
    height: 38px;
    margin-top: 1px;
    overflow: hidden;
    text-align: center;
    width: 38px;
}​