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 ❤️

Feedback on Responsive Web Design

Usersnap is the easiest way approach
to set up QA for your reponsive web design.

Give it a try!