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.

Original

Original

Bordered

Bordered

Colored circle

Colored circle
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)
by Itay Taragano