{"id":21168,"date":"2012-11-28T11:01:19","date_gmt":"2012-11-28T11:01:19","guid":{"rendered":"http:\/\/adding_borders_to_images"},"modified":"2025-03-30T01:55:00","modified_gmt":"2025-03-30T08:55:00","slug":"adding_borders_to_images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images","title":{"rendered":"Adding borders to images"},"content":{"rendered":"
Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and text elements really depends on the feeling the designer is trying to convey through the design.<\/div>\n
<\/div>\n
In this blog post we wanted to tell you about a new cloud-based transformation available through Cloudinary – adding borders to images<\/strong>. Yes, you can use CSS3 or image masks<\/a> to simulate borders around images, but the first is supported only on modern browsers and the latter clutters the HTML. In addition, if you plan on embedding images in emails or documents you can pretty much say goodbye to borders (certainly for images with rounded corners). For such cases, you can use Cloudinary’s extremely simple image transformation API to add borders directly to the original image.<\/div>\n
<\/div>\n
Consider the following photo. It was uploaded to Cloudinary using ‘autumn_leaves<\/em>‘ as its public ID:<\/div>\n
<\/div>\n
\"\"<\/a><\/div>\n
<\/div>\n
Adding a border around the image is straightforward. Simply specify the ‘border<\/strong><\/span>‘ parameter (‘bo<\/strong><\/span>‘ for URLs) using a CSS-like format. In the following example ‘4px_solid_black<\/strong>‘ means a 4 pixels wide black border.<\/div>\n
<\/div>\n
…\/demo\/image\/upload\/w_0.15,bo_4px_solid_black\/autumn_leaves.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Same example in Ruby on Rails<\/strong>:<\/div>\n
<% cl_image_tag(\"autumn_leaves.jpg\", :width => 0.15, :crop => :scale, \n                :border => { :width => 4, :color => 'black' }) %>\n<\/pre>\n
<\/div>\n
The border’s color component also accepts RGB format<\/strong>. The following example rounds the corners of the image using the ‘radius<\/strong>‘ parameter (‘r<\/strong>‘ for URLs) and adds a 6 pixels solid green border (‘#00390b’).<\/div>\n
<\/div>\n
…\/demo\/image\/upload\/w_0.15,r_20,bo_6px_solid_rgb:00390b\/autumn_leaves.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Same example in PHP<\/strong>:<\/div>\n
<?php echo cl_image_tag(\"autumn_leaves.jpg\", array(\"width\" => 0.15, \"crop\" => \"scale\", \n       \"radius\" => 20, \"border\" => array(\"width\" => 6, \"color\" => \"#00390b\"))) ?>\n<\/pre>\n
<\/div>\n
Cloudinary also supports adding semi-transparent borders<\/strong>. This is accomplished using the RGBA color format<\/strong>. The Alpha hex value ranges between 00 (fully transparent), to FF (opaque). The following example generates a semi transparent 10 pixels wide green border. We also use Cloudinary’s chained transformations to make the image elliptic (‘max<\/strong>‘ radius), rotate the image by 5 degrees and add an underlay blue background image (while resizing it and increasing its brightness).<\/div>\n
<\/div>\n
…\/upload\/w_0.15,r_max,bo_10px_solid_rgb:00390b60\/
\na_5\/u_site_bg,w_250,h_200,e_brightness:50\/autumn_leaves.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Same example in Django<\/strong>:<\/div>\n
import cloudinary\nimg = cloudinary.CloudinaryImage(\"autumn_leaves.jpg\")\nimg.image(transformation=[\n          dict(width=0.15, crop='scale', radius='max', \n               border=dict(width=10, color='#00390b60')), \n          dict(angle=5), \n          dict(underlay='site_bg', width=250, height=200, effects='brightness:50')])\n<\/pre>\n
And one last example – the following URL generates an image based on a Facebook profile picture that was automatically fetched by Cloudinary. The image is resized and rounded, and a black border is added. We then use an overlay to add Cloudinary’s logo with a semi-transparent wide border. As with all of the Cloudinary managed images, the resulting image is persistently stored in the Cloud and then delivered and cached through a fast CDN.<\/div>\n
<\/div>\n
…\/demo\/image\/facebook\/c_fill,w_150,h_180,r_10,bo_2px_solid_black\/
\nl_cloudinary_logo_white,w_90,g_south_east,r_5,y_7,x_7,bo_6px_solid_rgb:afcee990\/itail.jpg<\/strong><\/div>\n
<\/div>\n
<\/div>\n
By the way, you can also add the border as an incoming transformation so the original image is stored in the cloud already with the border. Here’s such an incoming transformation, this time in Node.js<\/strong>:<\/div>\n
cloudinary.image(\"itail.jpg\", { type: 'facebook', transformation: [\n                 { crop: 'fill', width: 150, height: 180, radius: 10, \n                   border: { width: 2, color: 'black'}},\n                 { overlay: 'cloudinary_logo_white', width: 90, \n                   gravity: 'south_east', radius: 5, y: 7, x: 7, \n                   border: { width: 6, color: '#afcee990'}}]})\n<\/pre>\n
Summary<\/h3>\n
If you are a regular reader of our blog, you know that Cloudinary keeps enhancing on various fronts. One of these fronts is our ever increasing set of image transformation capabilities. In this blog we introduced a cool new enhancement that you might find useful. We have more in our pipeline. If you want to see a new image transformation\u00a0capability added to Cloudinary, just drop us a line<\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"
Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and text elements really depends on the feeling the designer is trying to convey through the design. In this blog post we wanted to tell you about a new cloud-based transformation available through […]<\/p>\n","protected":false},"author":41,"featured_media":23419,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,165,214,229,257],"class_list":["post-21168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-image-transformation","tag-node","tag-php","tag-ruby-on-rails"],"acf":[],"yoast_head":"\nAdding borders to images<\/title>\n<meta name=\"description\" content=\"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding borders to images\" \/>\n<meta property=\"og:description\" content=\"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-28T11:01:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T08:55:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding borders to images\",\"datePublished\":\"2012-11-28T11:01:19+00:00\",\"dateModified\":\"2025-03-30T08:55:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\"},\"wordCount\":562,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA\",\"keywords\":[\"Django\",\"Image Transformation\",\"Node\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2012\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\",\"url\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\",\"name\":\"Adding borders to images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA\",\"datePublished\":\"2012-11-28T11:01:19+00:00\",\"dateModified\":\"2025-03-30T08:55:00+00:00\",\"description\":\"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding borders to images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding borders to images","description":"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images","og_locale":"en_US","og_type":"article","og_title":"Adding borders to images","og_description":"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and","og_url":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images","og_site_name":"Cloudinary Blog","article_published_time":"2012-11-28T11:01:19+00:00","article_modified_time":"2025-03-30T08:55:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images"},"author":{"name":"","@id":""},"headline":"Adding borders to images","datePublished":"2012-11-28T11:01:19+00:00","dateModified":"2025-03-30T08:55:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images"},"wordCount":562,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA","keywords":["Django","Image Transformation","Node","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2012","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images","url":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images","name":"Adding borders to images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA","datePublished":"2012-11-28T11:01:19+00:00","dateModified":"2025-03-30T08:55:00+00:00","description":"Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/adding_borders_to_images"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/adding_borders_to_images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding borders to images"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372818\/52_adding_borders_to_images\/52_adding_borders_to_images.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21168"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21168\/revisions"}],"predecessor-version":[{"id":37295,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21168\/revisions\/37295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23419"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}