Support » Theme: Twenty Twelve » [Theme: Twenty Twelve] Question about comment gravatars

  • Resolved pikahyper


    Does anyone know how the 3.5 beta 1 gravatar images in comments are getting rounded corners? Normally <img>’s can’t be rounded via border-radius but somehow the comment avatars in twentytwelve are and it isn’t from javascript.

    Is this something on the gravatar side? I’ve duplicated the css exactly and been unable to reproduce it. I also went through the functions.php file to make sure there wasn’t a function in there rounding them and didn’t see anything.

    Is there some build in function with version 3.5 beta 1 for rounding img corners that isn’t in version 3.4.2? cause using twentytwelve in 3.4.2 doesn’t have the rounded corners, if there is a built in function does anyone know where it is located so I can make it work in 3.4.2?

    Any help would be appreciated, thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Drew Jaynes


    WordPress Core Developer

    Do you have a link to your site where the corners are rounded on gravatars? I can’t reproduce this on a clean 3.5 Beta 1 build with Twenty Twelve.

    Normally I wouldn’t cause I do everything local but it just so happens this time I did install it on my web server trying to fix a bug in a plugin, link, you can see that the gravatar in the comment has rounded corners and when you disable/enable the border-radius in Chrome inspector it does go from rounded to square and back but it really shouldn’t.

    Updated to add: whoops small mistake, that is a clean install of 3.4.2 using the twentytwelve theme and even then it uses the rounded corners so it isn’t a build in 3.5 function and must be built into the twentytwelve theme but I still don’t see where.

    Drew Jaynes


    WordPress Core Developer

    The theme at the link you supplied is Twenty Eleven and according to Firebug, the rule/properties in style.css you’re looking for are:

    .commentlist .avatar {
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 1px 2px #CCCCCC;
      left: -102px;
      padding: 0;
      position: absolute;
      top: 0;

    Normally <img>’s can’t be rounded via border-radius

    Not sure where you got that idea. The border-radius properly applies to img’s just fine. Has for at least a year. Some older browsers didn’t support it properly, but all the major browsers I know of work fine with that now.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Twenty Twelve] Question about comment gravatars’ is closed to new replies.