Applying rounded corners to an image

Transforming an image to a rounded version is simply done by using the radius parameter (r in URLs). It accepts the number of pixels of the radius of all four corners.

Many website designs call for images with rounded corners, while some websites require images with a complete circular or oval (ellipse) crop. Twitter, for example, uses rounded corners for its users' profile pictures. Having images with rounded corners is great if you want to simplify your CSS and markup or when you need to support older browsers. With Cloudinary, rounding the corners of the image can be easily done on-the-fly in the cloud.

Here's an original sample image:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/front_face.jpg

Ruby:

cl_image_tag("front_face.jpg")

PHP v1:

cl_image_tag("front_face.jpg")

PHP v2:

(new ImageTag('front_face.jpg'));

Python:

CloudinaryImage("front_face.jpg").image()

Node.js:

cloudinary.image("front_face.jpg")

Java:

cloudinary.url().imageTag("front_face.jpg");

JS:

cloudinary.imageTag('front_face.jpg').toHtml();

jQuery:

$.cloudinary.image("front_face.jpg")

React:

<Image publicId="front_face.jpg" >

</Image>

Vue.js:

<cld-image publicId="front_face.jpg" >

</cld-image>

Angular:

<cl-image public-id="front_face.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("front_face.jpg")

Android:

MediaManager.get().url().generate("front_face.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("front_face.jpg")!, cloudinary: cloudinary)

Here's the same image with rounded corners of 30 pixels.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/r_50/front_face.jpg

Ruby:

cl_image_tag("front_face.jpg", :radius=>50)

PHP v1:

cl_image_tag("front_face.jpg", array("radius"=>50))

PHP v2:

(new ImageTag('front_face.jpg'))
  ->roundCorners(RoundCorners::byRadius(50));

Python:

CloudinaryImage("front_face.jpg").image(radius=50)

Node.js:

cloudinary.image("front_face.jpg", {radius: 50})

Java:

cloudinary.url().transformation(new Transformation().radius(50)).imageTag("front_face.jpg");

JS:

cloudinary.imageTag('front_face.jpg', {radius: 50}).toHtml();

jQuery:

$.cloudinary.image("front_face.jpg", {radius: 50})

React:

<Image publicId="front_face.jpg" >
  <Transformation radius="50" />
</Image>

Vue.js:

<cld-image publicId="front_face.jpg" >
  <cld-transformation radius="50" />
</cld-image>

Angular:

<cl-image public-id="front_face.jpg" >
  <cl-transformation radius="50">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Radius(50)).BuildImageTag("front_face.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().radius(50)).generate("front_face.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setRadius(50)).generate("front_face.jpg")!, cloudinary: cloudinary)

Note that the conversion to PNG is needed for supporting a transparent background:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/r_50/front_face.png

Ruby:

cl_image_tag("front_face.png", :radius=>50)

PHP v1:

cl_image_tag("front_face.png", array("radius"=>50))

PHP v2:

(new ImageTag('front_face.png'))
  ->roundCorners(RoundCorners::byRadius(50));

Python:

CloudinaryImage("front_face.png").image(radius=50)

Node.js:

cloudinary.image("front_face.png", {radius: 50})

Java:

cloudinary.url().transformation(new Transformation().radius(50)).imageTag("front_face.png");

JS:

cloudinary.imageTag('front_face.png', {radius: 50}).toHtml();

jQuery:

$.cloudinary.image("front_face.png", {radius: 50})

React:

<Image publicId="front_face.png" >
  <Transformation radius="50" />
</Image>

Vue.js:

<cld-image publicId="front_face.png" >
  <cld-transformation radius="50" />
</cld-image>

Angular:

<cl-image public-id="front_face.png" >
  <cl-transformation radius="50">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Radius(50)).BuildImageTag("front_face.png")

Android:

MediaManager.get().url().transformation(new Transformation().radius(50)).generate("front_face.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setRadius(50)).generate("front_face.png")!, cloudinary: cloudinary)

Any other radius value is accepted of course, for example - '20':

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/r_20/front_face.png

Ruby:

cl_image_tag("front_face.png", :radius=>20)

PHP v1:

cl_image_tag("front_face.png", array("radius"=>20))

PHP v2:

(new ImageTag('front_face.png'))
  ->roundCorners(RoundCorners::byRadius(20));

Python:

CloudinaryImage("front_face.png").image(radius=20)

Node.js:

cloudinary.image("front_face.png", {radius: 20})

Java:

cloudinary.url().transformation(new Transformation().radius(20)).imageTag("front_face.png");

JS:

cloudinary.imageTag('front_face.png', {radius: 20}).toHtml();

jQuery:

$.cloudinary.image("front_face.png", {radius: 20})

React:

<Image publicId="front_face.png" >
  <Transformation radius="20" />
</Image>

Vue.js:

<cld-image publicId="front_face.png" >
  <cld-transformation radius="20" />
</cld-image>

Angular:

<cl-image public-id="front_face.png" >
  <cl-transformation radius="20">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Radius(20)).BuildImageTag("front_face.png")

Android:

MediaManager.get().url().transformation(new Transformation().radius(20)).generate("front_face.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setRadius(20)).generate("front_face.png")!, cloudinary: cloudinary)

You can apply rounded corners on any image, for example, here's how to round the corners of a Facebook Profile pictures fetched in real-time:

https://res.cloudinary.com/demo/image/facebook/r_50/billclinton.png

Cloudinary supports cropping images to a shape of an ellipse or a circle by passing max as the value of the radius parameter (r_max in URLs). The following example transforms an uploaded JPG to a 100x150 PNG with max radius cropping, which generates the ellipse shape based on the detected face, with a transparent background:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_100,h_150,c_fill,g_face,r_max/front_face.png

Ruby:

cl_image_tag("front_face.png", :width=>100, :height=>150, :gravity=>"face", :radius=>"max", :crop=>"fill")

PHP v1:

cl_image_tag("front_face.png", array("width"=>100, "height"=>150, "gravity"=>"face", "radius"=>"max", "crop"=>"fill"))

PHP v2:

(new ImageTag('front_face.png'))
  ->resize(Resize::fill()->width(100)->height(150)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max());

Python:

CloudinaryImage("front_face.png").image(width=100, height=150, gravity="face", radius="max", crop="fill")

Node.js:

cloudinary.image("front_face.png", {width: 100, height: 150, gravity: "face", radius: "max", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(100).height(150).gravity("face").radius("max").crop("fill")).imageTag("front_face.png");

JS:

cloudinary.imageTag('front_face.png', {width: 100, height: 150, gravity: "face", radius: "max", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("front_face.png", {width: 100, height: 150, gravity: "face", radius: "max", crop: "fill"})

React:

<Image publicId="front_face.png" >
  <Transformation width="100" height="150" gravity="face" radius="max" crop="fill" />
</Image>

Vue.js:

<cld-image publicId="front_face.png" >
  <cld-transformation width="100" height="150" gravity="face" radius="max" crop="fill" />
</cld-image>

Angular:

<cl-image public-id="front_face.png" >
  <cl-transformation width="100" height="150" gravity="face" radius="max" crop="fill">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(150).Gravity("face").Radius("max").Crop("fill")).BuildImageTag("front_face.png")

Android:

MediaManager.get().url().transformation(new Transformation().width(100).height(150).gravity("face").radius("max").crop("fill")).generate("front_face.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(150).setGravity("face").setRadius("max").setCrop("fill")).generate("front_face.png")!, cloudinary: cloudinary)

Setting the width and height to the same value will generate a circle:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_fill,g_face,r_max/front_face.png

Ruby:

cl_image_tag("front_face.png", :width=>150, :height=>150, :gravity=>"face", :radius=>"max", :crop=>"fill")

PHP v1:

cl_image_tag("front_face.png", array("width"=>150, "height"=>150, "gravity"=>"face", "radius"=>"max", "crop"=>"fill"))

PHP v2:

(new ImageTag('front_face.png'))
  ->resize(Resize::fill()->width(150)->height(150)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max());

Python:

CloudinaryImage("front_face.png").image(width=150, height=150, gravity="face", radius="max", crop="fill")

Node.js:

cloudinary.image("front_face.png", {width: 150, height: 150, gravity: "face", radius: "max", crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(150).height(150).gravity("face").radius("max").crop("fill")).imageTag("front_face.png");

JS:

cloudinary.imageTag('front_face.png', {width: 150, height: 150, gravity: "face", radius: "max", crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("front_face.png", {width: 150, height: 150, gravity: "face", radius: "max", crop: "fill"})

React:

<Image publicId="front_face.png" >
  <Transformation width="150" height="150" gravity="face" radius="max" crop="fill" />
</Image>

Vue.js:

<cld-image publicId="front_face.png" >
  <cld-transformation width="150" height="150" gravity="face" radius="max" crop="fill" />
</cld-image>

Angular:

<cl-image public-id="front_face.png" >
  <cl-transformation width="150" height="150" gravity="face" radius="max" crop="fill">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(150).Gravity("face").Radius("max").Crop("fill")).BuildImageTag("front_face.png")

Android:

MediaManager.get().url().transformation(new Transformation().width(150).height(150).gravity("face").radius("max").crop("fill")).generate("front_face.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(150).setGravity("face").setRadius("max").setCrop("fill")).generate("front_face.png")!, cloudinary: cloudinary)

Any further image transformations can be also applied.