How to Make Your WordPress Author Image a Circle

by

By default, many WordPress themes display the author’s image (avatar) as a square. If you’d like to give your site a more modern and polished look, turning that image into a circle is quick and easy with a bit of CSS.

Step-by-Step: Make the Author Image Circular

Add this CSS to your site:

Option 1: Using the WordPress Customizer

  1. Go to Appearance → Customize.
  2. Click Additional CSS.
  3. Paste the following code:
.author-avatar img,
.avatar {
  border-radius: 50%;
  object-fit: cover;
}

4. Click Publish.

This code targets both the WordPress avatar and common class names like .author-avatar and .avatar.

Option 2: Add to Your Child Theme’s style.css

If you’re using a child theme (recommended for customizations), you can also add the same CSS to your style.css file:

  1. Go to your child theme directory.
  2. Open the style.css file.
  3. Add the same code to your style.css file.
  4. Clear cache for changes to take effect.

Using a child theme ensures your custom styles won’t be lost during theme updates.

Tip:

If it doesn’t work, try adding !important like this:

.avatar {
  border-radius: 50% !important;
  object-fit: cover;
}

This forces the browser to apply your rule even if the theme or plugin is overriding it.

Responsive and Clean

This method works on all devices and ensures that your author images maintain a clean, circular look, perfect for personal branding or team blogs.

If your theme uses different class names, you might need to inspect the avatar element using your browser’s developer tools and update the CSS selector.

That’s it! A tiny change that gives your site a big visual improvement. If you have any questions, drop them in the comments below 👇

Leave a Comment