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

enter image description here

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.

Thanks guys. The background image is coming from Gravatar itself. It is the default Mystery Man. Also user images from don't fill the circle either. I tried a few of my own. Really weird. — Miura-shi, Oct 29 '12 at 17:56
It looks like something is over-riding the border style. Can you show us the rest of your CSS? Or, at least, anything that would target the `.gravatar` element — Shmiddty, Oct 29 '12 at 18:19
Sure thing, it must be something in my bootstrap.css let me post everything related to .gravatar — Miura-shi, Oct 29 '12 at 18:22
Show us the html that `get_gravatar` generates instead of the PHP. — Shmiddty, Oct 29 '12 at 18:44

enhzflep · Accepted Answer · 2012-10-29T18:36:09.397

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; ?>

the problem is I am calling the image from Gravatar and not using src"url" so what could I do in that case? I updated my code in the description for reference. — Miura-shi, Oct 29 '12 at 18:32
@AoiHana - Cool. :) I've updated my answer, that should work. — enhzflep, Oct 29 '12 at 18:36
Wow! way to go that looks beautiful :) worked perfectly! Thank you so much! — Miura-shi, Oct 29 '12 at 18:41
You're welcome. :) And thank-you... now I know to watch out for that little gotcha. — enhzflep, Oct 29 '12 at 18:49

Artur Kim · Answer 2 · 2012-10-29T18:42:42.603

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

I don't believe an image tag is being used, but I haven't seen enough of the code to know for sure. — Shmiddty, Oct 29 '12 at 18:20

Image not filling border-radius

2 Answers2