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

The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more
How a Cloud-native DAM Platform Optimizes Customer Experiences

In today’s digital age, brands rely heavily on rich media to tell stories, foster engagement, and make emotional connections that drive results. Marketers use videos and images, tuned to customers’ interests, to create dynamic visual experiences. Digital campaigns about trips to Florida, for instance, have separate plot lines, depending on audiences’ passions for golf, deep sea fishing, or kid-friendly versus romantic getaways. Marketers expect to detect preferences, produce personalized experiences highlighting different desires, and turn digital prospects into vacationing customers. The ultimate success of a marketing campaign relies on the consistent delivery of these customer experiences, at scale.

Read more
Cloudinary’s Media Developer Experts Program

Cloudinary was founded by developers and developer-centric thinking is in our DNA. Our work with developers helps them better understand all things rich-media management and delivery is crucial to us. Now, in an effort to recognize, support, and reward the innovative leaders in that technical community, we’re excited to introduce a new Media Developer Experts (MDE) program! MDEs will leverage the Cloudinary platform to foster a community of media-management professionals; receive training and certifications to become experts within their field or audience; advance the state of media management, adoption, and best practices; and make the web more accessible.

Read more
An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more