Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg")
PHP:
cl_image_tag("face_top.jpg")
Python:
CloudinaryImage("face_top.jpg").image()
Node.js:
cloudinary.image("face_top.jpg")
Java:
cloudinary.url().imageTag("face_top.jpg");
JS:
cloudinary.imageTag('face_top.jpg').toHtml();
jQuery:
$.cloudinary.image("face_top.jpg")
React:
<Image publicId="face_top.jpg" >

</Image>
Angular:
<cl-image public-id="face_top.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("face_top.jpg")
Android:
MediaManager.get().url().generate("face_top.jpg");
iOS:
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/bo_2px_solid_black/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Angular:
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/r_20,bo_2px_solid_black/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg", :transformation=>[
  {:effect=>"trim"},
  {:radius=>20, :border=>"2px_solid_black"}
  ])
PHP:
cl_image_tag("face_top.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("radius"=>20, "border"=>"2px_solid_black")
  )))
Python:
CloudinaryImage("face_top.jpg").image(transformation=[
  {'effect': "trim"},
  {'radius': 20, 'border': "2px_solid_black"}
  ])
Node.js:
cloudinary.image("face_top.jpg", {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .radius(20).border("2px_solid_black")).imageTag("face_top.jpg");
JS:
cloudinary.imageTag('face_top.jpg', {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("face_top.jpg", {transformation: [
  {effect: "trim"},
  {radius: 20, border: "2px_solid_black"}
  ]})
React:
<Image publicId="face_top.jpg" >
  <Transformation effect="trim" />
  <Transformation radius="20" border="2px_solid_black" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Radius(20).Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .radius(20).border("2px_solid_black")).generate("face_top.jpg");
iOS:
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face,r_max,bo_2px_solid_red/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg", :width=>100, :height=>100, :gravity=>"face", :radius=>"max", :border=>"2px_solid_red", :crop=>"thumb")
PHP:
cl_image_tag("face_top.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "border"=>"2px_solid_red", "crop"=>"thumb"))
Python:
CloudinaryImage("face_top.jpg").image(width=100, height=100, gravity="face", radius="max", border="2px_solid_red", crop="thumb")
Node.js:
cloudinary.image("face_top.jpg", {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").radius("max").border("2px_solid_red").crop("thumb")).imageTag("face_top.jpg");
JS:
cloudinary.imageTag('face_top.jpg', {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("face_top.jpg", {width: 100, height: 100, gravity: "face", radius: "max", border: "2px_solid_red", crop: "thumb"})
React:
<Image publicId="face_top.jpg" >
  <Transformation width="100" height="100" gravity="face" radius="max" border="2px_solid_red" crop="thumb" />
</Image>
Angular:
<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:
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:
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:
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_cloudinary_logo_white.png,w_150,r_5,bo_10px_solid_rgb:afcee9/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg", :overlay=>"cloudinary_logo_white.png", :width=>150, :radius=>5, :border=>"10px_solid_rgb:afcee9")
PHP:
cl_image_tag("face_top.jpg", array("overlay"=>"cloudinary_logo_white.png", "width"=>150, "radius"=>5, "border"=>"10px_solid_rgb:afcee9"))
Python:
CloudinaryImage("face_top.jpg").image(overlay="cloudinary_logo_white.png", width=150, radius=5, border="10px_solid_rgb:afcee9")
Node.js:
cloudinary.image("face_top.jpg", {overlay: "cloudinary_logo_white.png", width: 150, radius: 5, border: "10px_solid_rgb:afcee9"})
Java:
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:
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:
$.cloudinary.image("face_top.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_logo_white.png"), width: 150, radius: 5, border: "10px_solid_rgb:afcee9"})
React:
<Image publicId="face_top.jpg" >
  <Transformation overlay="cloudinary_logo_white.png" width="150" radius="5" border="10px_solid_rgb:afcee9" />
</Image>
Angular:
<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:
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:
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:
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 digits to the color's RGB value, in the following example - 70%:

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

by Itay Taragano
Tags: