Cloudinary Cookbook recipes about Border

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

Bordered

Colored 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/bo_2px_solid_black/face_top.jpg

Ruby:

cl_image_tag("face_top.jpg", :border=>"2px_solid_black")

PHP v1:

cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))

PHP v2:

(new ImageTag('face_top.jpg'))
  ->border(Border::solid(2, Color::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>

Vue.js:

<cld-image publicId="face_top.jpg" >
  <cld-transformation border="2px_solid_black" />
</cld-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)

by Itay Taragano Jul 19, 2015

Tags: