Add a border to images

Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

Here's an unmodified image we will use for our demonstration:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg")
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg")
React:
Copy to clipboard
<Image publicId="face_top.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("face_top.jpg")!, cloudinary: cloudinary)
Original

In our first example, we'll simply add a solid black 2 pixel border to the image:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation border="2px_solid_black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
Bordered

We now use the trim effect (as explained in the Trim photo background recipe) to trim the white spaces around the images. In addition, we will round the image's corners (as explained in the Applying rounded corners to an image recipe) and then the border will be applied accordingly:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :transformation=>[
  {:effect=>"trim"},
  {:radius=>20, :border=>"2px_solid_black"}
  ])
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("radius"=>20, "border"=>"2px_solid_black")
  )))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(transformation=[
  {'effect': "trim"},
  {'radius': 20, 'border': "2px_solid_black"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .radius(20).border("2px_solid_black")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation effect="trim" />
  <Transformation radius="20" border="2px_solid_black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation radius="20" border="2px_solid_black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation radius="20" border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Radius(20).Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .radius(20).border("2px_solid_black")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("trim").chain()
  .setRadius(20).setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
Trimmed

Here's the same image, cropped to a circle, centered on the automatically detected face (as explained in the Face detection-based image cropping recipe), and displayed with a red 2 pixel border:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :width=>100, :height=>100, :gravity=>"face", :radius=>"max", :border=>"2px_solid_red", :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "border"=>"2px_solid_red", "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(width=100, height=100, gravity="face", radius="max", border="2px_solid_red", crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").radius("max").border("2px_solid_red").crop("thumb")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation width="100" height="100" gravity="face" radius="max" border="2px_solid_red" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation width="100" height="100" gravity="face" radius="max" border="2px_solid_red" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation width="100" height="100" gravity="face" radius="max" border="2px_solid_red" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Radius("max").Border("2px_solid_red").Crop("thumb")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").radius("max").border("2px_solid_red").crop("thumb")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setRadius("max").setBorder("2px_solid_red").setCrop("thumb")).generate("face_top.jpg")!, cloudinary: cloudinary)
Colored circle

You can also pass an RGB value for the border's color. In the following example we'll add an overlay image and set its border with an RGB value:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :overlay=>"cloudinary_logo_white.png", :width=>150, :radius=>5, :border=>"10px_solid_rgb:afcee9")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("overlay"=>"cloudinary_logo_white.png", "width"=>150, "radius"=>5, "border"=>"10px_solid_rgb:afcee9"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(overlay="cloudinary_logo_white.png", width=150, radius=5, border="10px_solid_rgb:afcee9")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {overlay: "cloudinary_logo_white.png", width: 150, radius: 5, border: "10px_solid_rgb:afcee9"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_logo_white.png")).width(150).radius(5).border("10px_solid_rgb:afcee9")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_logo_white.png"), width: 150, radius: 5, border: "10px_solid_rgb:afcee9"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_logo_white.png"), width: 150, radius: 5, border: "10px_solid_rgb:afcee9"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_logo_white.png")).Width(150).Radius(5).Border("10px_solid_rgb:afcee9")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_logo_white.png")).width(150).radius(5).border("10px_solid_rgb:afcee9")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_logo_white.png").setWidth(150).setRadius(5).setBorder("10px_solid_rgb:afcee9")).generate("face_top.jpg")!, cloudinary: cloudinary)
Overlay border

To set the opacity percentage of the border and make it semi-transparent, add an extra 2 hex digits to the color's RGB value. A value of FF will make the border solid, 00 will make it transparent.

For example, the following URL uses an opacity value of B2, which is approximately 70%:

Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :overlay=>"cloudinary_logo_white.png", :width=>150, :radius=>5, :border=>"10px_solid_rgb:afcee9b2")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("overlay"=>"cloudinary_logo_white.png", "width"=>150, "radius"=>5, "border"=>"10px_solid_rgb:afcee9b2"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(overlay="cloudinary_logo_white.png", width=150, radius=5, border="10px_solid_rgb:afcee9b2")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {overlay: "cloudinary_logo_white.png", width: 150, radius: 5, border: "10px_solid_rgb:afcee9b2"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_logo_white.png")).width(150).radius(5).border("10px_solid_rgb:afcee9b2")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_logo_white.png"), width: 150, radius: 5, border: "10px_solid_rgb:afcee9b2"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_logo_white.png"), width: 150, radius: 5, border: "10px_solid_rgb:afcee9b2"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9b2" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9b2" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9b2">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_logo_white.png")).Width(150).Radius(5).Border("10px_solid_rgb:afcee9b2")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_logo_white.png")).width(150).radius(5).border("10px_solid_rgb:afcee9b2")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_logo_white.png").setWidth(150).setRadius(5).setBorder("10px_solid_rgb:afcee9b2")).generate("face_top.jpg")!, cloudinary: cloudinary)
Semi-transparent border

by Itay Taragano