Cloudinary Blog

Adding rounded corners to images and cropping images to circles

 
Twitter and Facebook. One adds rounded corners to their user’s profile pictures. The other doesn’t. Can you recall which service is the one adding rounded corners?
 
At the moment, the right answer is Twitter, though if you guessed Facebook you weren’t far off. Both services have on-and-off relations with rounded cornered images, and Facebook tried different designs before backing out of rounded corners for the time being.
 
Overall, it’s a matter of fashion, though having images with rounded corners seems like a very common graphics design requirement these days.
 
So how does one goes on adding rounded corners for his originally rectangular images?
 
The main approach today is adding a rounded-corner mask to the image on the client’s side, using either CSS or image mask overlays. 
 
With Cloudinary, you now have a new approach - add rounded corners to the original image and serve it to the browser in its final form. This approach offers some very nice benefits.
 
While the client-side masking approach usually works, it certainly has its drawbacks.
Supporting older browsers is non-trivial and the HTML can get cluttered. In addition, this method fails when generating PDFs or sending emails. Email clients today simply do not support advanced CSS techniques. 
 
For example, you may notice that emails sent from Twitter use rectangular thumbnails and not rounded ones, breaking the website’s graphics design concept. We assume that this is due to these technical difficulties. Their graphics design team can’t be too happy with this.
 
Last but not least, client-side masking is non-trivial for mobile applications where it’s more complex to transform the images or add masks on the device itself.
 
So how can Cloudinary help?
 
We recently added support for rounded corners transformation in the cloud, and it’s a snap to use. Simply add the new ‘radius’ parameter to have your images delivered with rounded corners. You can even use this technique to have a completely circular or oval crop. How cool is that? 
 
Here’s a quick example for generating a 150x100 PNG of an uploaded sample image while adding rounded corners. Either by using our dynamic URL API (delivered through a CDN) or in Rails:
 
 
 
White Chicken White Chicken - Rounded
 
  <%= cl_image_tag("white_chicken.png", :width => 150, :height => 100,
                                    :crop => :fill, :radius => 20) %>

You can also easily chain additional transformations together. For example, a 100x100 PNG of a Facebook profile with face detection based cropping and rounded corners:


Rounded face

Using this method you can also achieve completely circular and ellipses crops. It certainly adds a nice graphical touch.

Below is an example of a 150x100 ellipse of the original image. Simply passing ‘max’ as the radius parameter:


Ellipse

You can of course use face detection and circular cropping to get nice circles with faces of your users. To allow transparency, remember to convert your original images to PNGs, by simply using the .png suffix. Here is how it looks on a colored background:



We’d be happy to hear how you used Cloudinary’s rounded corners crop in your website. And - what other graphical effects would you like us to support?

Recent Blog Posts

Sound Browser: Grand Prize Winner of the Capitol360 Hackathon

Music videos, which comprise an important part of the video-streaming industry, are consistently the most-viewed content on streaming giants, such as YouTube and Vimeo. In exchange for free viewing, those channels serve advertisements for revenue. That business model creates a clumsy user experience, however, as a result of often-repeated ads that don't relate to the content.

Read more
Building a Live Feed of FIFA World Cup Moments

Widely acclaimed as the world’s biggest sporting event, the World Cup has established itself as the most captivating tournament to look forward to across the globe. Dating back to 1930, when the first World Cup was hosted in Uruguay, it has always engendered numerous moments of excitement, not only for the participating teams but also for the countries they ably represented. Little could anyone have anticipated that a game of 22 able-bodied men running to take possession of a leather ball could become so famous.

Read more
Auto AI Content Recognition Tagging in Cloudinary DAM

Automating the categorization of your images and videos can help democratize access to your organization's creative assets. Many teams throughout your organization have likely spent a lot of time and effort generating high-quality content, but it'd be all for naught if the content just ends up in some anonymous folder on somebody's hard drive or is randomly dropped into your cloud storage with no functional organizational strategy.

Read more
Capitol 360 Incubating New Waves of MusicTech

Last month, we had the pleasure of supporting Capitol Music Group’s first ever hackathon, the first in a series of hackathons as part of its newly launched Capitol360 Innovation Center, established to bridge the gaps between music and tech and make music better for everyone. We are proud to be a founding technology partner and were honored to play a part in Capitol’s first-ever 24-hour hack. And because so many of us are avid and longtime music fans we’re also personally thrilled to have the opportunity to work with one of the most influential leaders in music to foster these new and meaningful connections.

Read more
Headshot transformations from Fluent + Velocity 2018

On June 13-14, O'Reilly held its annual Fluent + Velocity conference in San Jose and it was great! Cloudinary set up a pretty incredible booth and brought in a professional photographer to take headshots of the attendees who stopped by. Once a photo was snapped, the raw camera file was immediately uploaded to our media library and transformed into something that can be posted right away on LinkedIn.

Read more