Admin bar: Make the user avatar image circular

[fushar]

Trac ticket: https://core.trac.wordpress.org/ticket/64667

Summary

Make the user avatar in the admin bar circular as follows:

• Desktop viewport: bump the size from 18px to 20px; add border-radius: 50%
• Mobile viewport: bump the size from 26px to 28px; add border-radius: 50%

The size changes are made to make it look balanced with the rest of the icons in the admin bar.

This PR strictly updates the avatar on admin bar only. I did not update, for example, in profile.php page. I think it's better to let it display the original image without circular modification.

Desktop

Before

After

Before	After

Mobile

Before	After

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.7
Used for: CSS and screenshots generation.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.