How to make Gravatar images round in WordPress

You do not need to edit every profile picture or generate a permanently circular image. A CSS rule can round WordPress avatar output wherever the matching selector appears, including comment lists and author areas.

Recommended CSS

For standard WordPress avatar images, begin with:

.avatar {
  border-radius: 50%;
}

A percentage radius follows the element’s dimensions. When width and height are equal, 50% produces a circle. When they differ, the result is an ellipse.

A more resilient version

If the source image is not perfectly square or the theme applies unusual sizing, define a square display box and control how the image fills it:

img.avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

Choose where to add the CSS

The related TDWP guide, How to Add Custom CSS to Your WordPress Theme, explains these placement choices in more detail.

Apply and verify the change

Choose the correct selector scope

The broad .avatar selector intentionally affects every matching avatar. Narrow the selector when only one location should change.

Find the actual avatar class

If the rule does not work, inspect the image rather than guessing. In current Chrome, Firefox, Edge, or Safari developer tools, right-click the image and choose an Inspect command. Review the image’s classes and the Styles or Computed panel.

WordPress’s avatar API produces an image element, but themes and plugins may alter the HTML, add wrappers, replace the avatar service, or output an entirely custom profile component.

When another rule overrides the radius

Open the browser inspector and look for a crossed-out border-radius declaration. That usually indicates a more specific selector, a later rule, inline styling, or an !important declaration.

.comment-list img.avatar {
  border-radius: 50%;
}

Prefer a slightly more specific selector or correct source order before adding !important. Excessive specificity makes future theme changes harder to maintain.

Avatars that are clickable links

Rounding the image should not remove the link’s keyboard focus indicator. When an avatar is wrapped in a link, apply focus styling to the link rather than relying on an outline that may be clipped by the image.

.comment-author a:focus-visible {
  border-radius: 50%;
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Preserved original 2014 CSS

.avatar {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

Troubleshooting

The avatar is oval instead of circular

The rendered width and height are different. Use a square source or apply aspect-ratio: 1 and object-fit: cover to the image at the intended display size.

The rule affects too many profile images

Replace the broad .avatar selector with a context-specific selector such as .comment-list .avatar.

The CSS is saved but nothing changes

Inspect the public image, confirm the selector matches, review the cascade, and clear optimization or CDN caches. Also test while logged out because account and public templates can differ.

The image corners are still visible

A wrapper may have its own background, border, padding, or overflow behavior. Inspect both the image and its parent link or container.

Only some avatars are round

A plugin or theme may output different class names in comments, author boxes, profiles, and widgets. Add targeted selectors rather than one overly broad rule.

A theme update removed the styling

The CSS was probably added directly to a parent stylesheet or the active theme changed. Move it to Additional CSS, an appropriate Styles setting, or a child theme.

The avatar looks blurry

A small source image may be enlarged beyond its intended size. Avoid forcing a larger width and height than WordPress or the theme requested.

Test the final result

What changed from the original tutorial

The original page recommended editing style.css, supplied three border-radius declarations, explained that WordPress normally adds an avatar class, preserved a DevTools inspection screenshot, and referred readers to a compatibility table and radius generator. The revised guide keeps the CSS and screenshot while recommending update-safe placement, modern unprefixed CSS, square-image handling, narrower selectors, accessibility, cache checks, and broader testing.

Official references