Web Design Tidbits #3: Google+ rounded avatar

tool set web development from mockup to app

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!

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!