Web Design Tidbits #3: Google+ rounded avatar

In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In  this post I’ll look at the pretty rounded avatar my Google+ profile is sporting.

I love how the rounded images makes practically every profile picture look nice and friendly. To figure out how Google+ went about this, I went ahead and replicated the necessary HTML and CSS and saved it on Codepen. Feel free to play around with it and use is for your own page!

If you like this article, give it some sharing ❤️

Google+ rounded avatar on Codepen

Recreating the Google+ rounded avatar

Google+ simply uses a border-radius and applies it to images with a certain class (in our case: .avatar) to create rounded corners for the image you upload as your profile picture. Sometimes simplicity can be so beautiful…

For the next Tidbits post, I’ll take a look at the Gmail send button. Might you have any requests for upcoming editions, let us know in the comments!

If you like this article, give it some sharing ❤️

Usersnap helps developers.
Find out how!

Easier work for development teams. All the info you need. Top developer teams are using this. Find out why?

Try Usersnap now!