{"id":21120,"date":"2012-04-16T13:39:41","date_gmt":"2012-04-16T13:39:41","guid":{"rendered":"http:\/\/adding_rounded_corners_to_images_and_cropping_images_to_circles"},"modified":"2026-03-15T13:09:59","modified_gmt":"2026-03-15T20:09:59","slug":"adding_rounded_corners_to_images_and_cropping_images_to_circles","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles","title":{"rendered":"Adding Rounded Corners to Images and Cropping Images to Circles"},"content":{"rendered":"<div><\/div>\n<div>Twitter and Facebook. One adds rounded corners to their user\u2019s profile pictures. The other doesn\u2019t. Can you recall which service is the one adding rounded corners?<\/div>\n<div><\/div>\n<div>At the moment, the right answer is Twitter, though if you guessed Facebook you weren\u2019t far off. Both services have on-and-off relations with rounded cornered images, and Facebook tried different designs before backing out of rounded corners for the time being.<\/div>\n<div><\/div>\n<div>Overall, it\u2019s a matter of fashion, though having images with rounded corners seems like a very common graphics design requirement these days.<\/div>\n<div><\/div>\n<div>So how does one goes on adding rounded corners for originally rectangular images?<\/div>\n<div><\/div>\n<h2>3 Ways to Apply the Rounded-Corner Mask<\/h2>\n<div><\/div>\n<div>The main approach today is adding a rounded-corner mask to the image on the client\u2019s side, using either CSS or <a href=\"https:\/\/cloudinary.com\/glossary\/image-masking\">image mask<\/a> overlays.<\/div>\n<div><\/div>\n<div>With Cloudinary, you now have a new approach: add rounded corners to the original image and serve it to the browser in its final form. This approach offers some very nice benefits.<\/div>\n<div><\/div>\n<div>While the client-side masking approach usually works, it certainly has its drawbacks.<\/div>\n<div>Supporting older browsers is non-trivial and the HTML can get cluttered. In addition, this method fails when generating PDFs or sending emails. Email clients today simply do not support advanced CSS techniques.<\/div>\n<div><\/div>\n<div>For example, you may notice that emails sent from Twitter use rectangular thumbnails and not rounded ones, breaking the website\u2019s graphics design concept. We assume that this is due to these technical difficulties. Their graphics design team can\u2019t be too happy with this.<\/div>\n<div><\/div>\n<div>Last but not least, client-side masking is non-trivial for mobile applications where it\u2019s more complex to transform the images or add masks on the device itself.<\/div>\n<div><\/div>\n<h2><strong>So How Can Cloudinary Help?<\/strong><\/h2>\n<div><\/div>\n<div>\n<div>We recently added support for rounded corners transformation in the cloud, and it\u2019s a snap to use. Simply add the new \u2018<span style=\"color: #800000;\"><strong>radius<\/strong><\/span>\u2019 parameter to have your images delivered with rounded corners. You can even use this technique to have a completely circular or oval crop. How cool is that?<\/div>\n<div><\/div>\n<div>Here\u2019s a quick example for generating a 150&#215;100 PNG of an uploaded sample image while adding rounded corners. Either by using our dynamic URL API (delivered through a CDN) or in Rails:<\/div>\n<div><\/div>\n<div>\n<div><span style=\"font-family: verdana, geneva;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,r_20\/white_chicken.png\" target=\"_blank\" rel=\"noopener\"><span style=\"font-size: small;\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/<\/span><strong>w_150,h_100,c_fill,<span style=\"color: #800000;\">r_20<\/span><\/strong>\/white_chicken.png<\/a><\/span><\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: 10px; margin-right: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill\/white_chicken.png\" alt=\"White Chicken\" width=\"150\" height=\"100\" \/>\u00a0<img loading=\"lazy\" decoding=\"async\" style=\"margin-left: 10px; margin-right: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,r_20\/white_chicken.png\" alt=\"White Chicken - Rounded\" width=\"150\" height=\"100\" \/><\/p>\n<div><\/div>\n<div><span style=\"font-family: verdana, geneva; font-size: small;\"><strong><em><span style=\"background-color: transparent; vertical-align: baseline;\"> \u00a0\u00a0&lt;%= cl_image_tag(&#8220;white_chicken.png&#8221;, :width =&gt; 150, :height =&gt; 100, <\/span><br \/>\n<span style=\"background-color: transparent; vertical-align: baseline;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0:crop =&gt; :fill, :radius =&gt; <\/span><span style=\"color: #990000; background-color: transparent; vertical-align: baseline;\">20<\/span><span style=\"background-color: transparent; vertical-align: baseline;\">) %&gt;<\/span><\/em><\/strong><\/span><\/div>\n<div><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u00a0<\/span><\/strong><\/div>\n<div>You can also easily chain additional transformations together. For example, a 100&#215;100 PNG of a Facebook profile with face detection based cropping and rounded corners:<\/div>\n<div><span style=\"font-family: Arial;\"><span style=\"font-size: 15px;\">\u00a0<\/span><\/span><\/div>\n<div style=\"padding-left: 30px;\"><span style=\"background-color: transparent; vertical-align: baseline; font-family: verdana, geneva;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/facebook\/w_100,h_100,c_thumb,g_face,r_25\/billclinton.png\" target=\"_blank\" rel=\"noopener\">&#8230;\/image\/facebook\/<strong>w_100,h_100,c_thumb,g_face,<span style=\"color: #800000;\">r_25<\/span><\/strong>\/billclinton.png<\/a><\/span><\/div>\n<div><span style=\"font-family: Arial;\"><span style=\"font-size: 15px;\">\u00a0<\/span><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: 10px; margin-right: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/facebook\/w_100,h_100,c_thumb,g_face,r_25\/billclinton.png\" alt=\"Rounded face\" width=\"100\" height=\"100\" \/><\/span><\/strong><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u00a0<\/span><\/strong><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><strong style=\"color: #000000; font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">Using this method you can also achieve completely circular and <a href=\"https:\/\/cloudinary.com\/tools\/ellipse-crop-image\">ellipses crops<\/a>. It certainly adds a nice graphical touch.<\/span><\/strong><\/span><\/strong><\/span><\/span><strong style=\"font-family: Times; font-size: medium;\"><strong id=\"internal-source-marker_0.975112816086039\" style=\"color: #000000; font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">Below is an example of a 150&#215;100 ellipse of the original image. Simply passing \u2018<\/span><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; color: #800000;\">max<\/span><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u2019 as the radius parameter:<\/span><\/strong><\/strong><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><strong style=\"color: #000000; font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u00a0<\/span><\/strong><\/span><\/strong><\/span><\/div>\n<div style=\"padding-left: 30px;\"><span style=\"font-family: verdana, geneva;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,r_max\/white_chicken.png\" target=\"_blank\" rel=\"noopener\"><span style=\"background-color: transparent; vertical-align: baseline;\"><span style=\"color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><span style=\"background-color: transparent; vertical-align: baseline;\">&#8230;\/image\/upload\/<strong>w_150,h_100,c_fill,<span style=\"color: #800000;\">r_max<\/span><\/strong>\/white_chicken.png<\/span><\/span><\/span><\/a><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-family: Arial;\">\u00a0<\/span><\/span><\/span><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-family: Arial;\"><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: 10px; margin-right: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,r_max\/white_chicken.png\" alt=\"Ellipse\" width=\"150\" height=\"100\" \/><\/span><\/span><\/span><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-size: 15px; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: normal; vertical-align: baseline;\"><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><span style=\"font-family: Arial;\">\u00a0<\/span><\/span><\/span><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong id=\"internal-source-marker_0.975112816086039\" style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">You can of course use face detection and circular cropping to get nice circles with faces of your users. To allow transparency, remember to convert your original images to PNGs, by simply using the .png suffix. Here is how it looks on a colored background:<\/span><\/strong><\/span><\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u00a0<\/span><\/strong><\/span><\/div>\n<div style=\"background-color: #af2900; padding: 20px;\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"2\"><span style=\"color: #ffffff;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_center.png\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #ffffff;\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/<\/span><\/a><\/span><br \/>\n<span style=\"color: #ffffff;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_center.png\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #ffffff;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <strong>w_100,h_100,c_thumb,g_face,<span style=\"color: #ffc000;\">r_max<\/span>\/face_center.png<\/strong><\/span><\/a><\/span><\/td>\n<\/tr>\n<tr>\n<td>\u00a0<img loading=\"lazy\" decoding=\"async\" style=\"margin: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.25\/face_center.png\" alt=\"\" width=\"71\" height=\"106\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" style=\"margin: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_center.png\" alt=\"\" width=\"100\" height=\"100\" \/><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><span style=\"color: #ffffff;\"><span style=\"color: #ffffff;\">\u00a0<\/span><\/span><span style=\"color: #ffffff;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_left.png\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #ffffff;\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/<\/span><\/a><\/span><br \/>\n<span style=\"color: #ffffff;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_left.png\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #ffffff;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<strong>w_100,h_100,c_thumb,g_face,<span style=\"color: #ffc000;\">r_max<\/span>\/face_left.png<\/strong><\/span><\/a><\/span><\/td>\n<\/tr>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" style=\"margin: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.3\/face_left.png\" alt=\"\" width=\"128\" height=\"85\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" style=\"margin: 10px;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_100,h_100,c_thumb,g_face,r_max\/face_left.png\" alt=\"\" width=\"100\" height=\"100\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div><span style=\"background-color: transparent; vertical-align: baseline; font-size: 15px;\"><strong style=\"font-family: Times; font-size: medium;\"><span style=\"font-size: 15px; font-family: Arial; background-color: transparent; font-weight: normal; vertical-align: baseline;\">\u00a0<\/span><\/strong><\/span><\/div>\n<h2><strong>Put Cloudinary&#8217;s Image Transformations to Work<\/strong><\/h2>\n<div><\/div>\n<div>Transform your sharp images with rounded corners on your website with Cloudinary&#8217;s latest image transformations. With the new &#8220;radius&#8221; parameter, you can easily add rounded corners, circular crops, or even elliptical shapes to your images directly in the cloud. This approach eliminates the drawbacks of client-side masking and ensures consistent visuals across platforms, including PDFs and emails.<\/div>\n<div><\/div>\n<div>We&#8217;d love to hear how you leverage this transformation and what other image effects you&#8217;d find valuable. <a href=\"https:\/\/cloudinary.com\/\">Contact us today<\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Twitter and Facebook. One adds rounded corners to their user\u2019s profile pictures. The other doesn\u2019t. Can you recall which service is the one adding rounded corners? At the moment, the right answer is Twitter, though if you guessed Facebook you weren\u2019t far off. Both services have on-and-off relations with rounded cornered images, and Facebook tried [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":21121,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165],"class_list":["post-21120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Adding Rounded Corners to Images and Cropping Images to Circles<\/title>\n<meta name=\"description\" content=\"Learn how to create rounded corners to your images with a single line of code.\" \/>\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_rounded_corners_to_images_and_cropping_images_to_circles\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Rounded Corners to Images and Cropping Images to Circles\" \/>\n<meta property=\"og:description\" content=\"Learn how to create rounded corners to your images with a single line of code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-16T13:39:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-15T20:09:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\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_rounded_corners_to_images_and_cropping_images_to_circles#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding Rounded Corners to Images and Cropping Images to Circles\",\"datePublished\":\"2012-04-16T13:39:41+00:00\",\"dateModified\":\"2026-03-15T20:09:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\"},\"wordCount\":667,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA\",\"keywords\":[\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2012\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\",\"url\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\",\"name\":\"Adding Rounded Corners to Images and Cropping Images to Circles\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA\",\"datePublished\":\"2012-04-16T13:39:41+00:00\",\"dateModified\":\"2026-03-15T20:09:59+00:00\",\"description\":\"Learn how to create rounded corners to your images with a single line of code.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Rounded Corners to Images and Cropping Images to Circles\"}]},{\"@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 Rounded Corners to Images and Cropping Images to Circles","description":"Learn how to create rounded corners to your images with a single line of code.","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_rounded_corners_to_images_and_cropping_images_to_circles","og_locale":"en_US","og_type":"article","og_title":"Adding Rounded Corners to Images and Cropping Images to Circles","og_description":"Learn how to create rounded corners to your images with a single line of code.","og_url":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles","og_site_name":"Cloudinary Blog","article_published_time":"2012-04-16T13:39:41+00:00","article_modified_time":"2026-03-15T20:09:59+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.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_rounded_corners_to_images_and_cropping_images_to_circles#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles"},"author":{"name":"","@id":""},"headline":"Adding Rounded Corners to Images and Cropping Images to Circles","datePublished":"2012-04-16T13:39:41+00:00","dateModified":"2026-03-15T20:09:59+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles"},"wordCount":667,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA","keywords":["Image Transformation"],"inLanguage":"en-US","copyrightYear":"2012","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles","url":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles","name":"Adding Rounded Corners to Images and Cropping Images to Circles","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA","datePublished":"2012-04-16T13:39:41+00:00","dateModified":"2026-03-15T20:09:59+00:00","description":"Learn how to create rounded corners to your images with a single line of code.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/adding_rounded_corners_to_images_and_cropping_images_to_circles#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Rounded Corners to Images and Cropping Images to Circles"}]},{"@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\/v1649719179\/Web_Assets\/blog\/24_adding_rounded_corners\/24_adding_rounded_corners.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21120","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=21120"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21120\/revisions"}],"predecessor-version":[{"id":39883,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21120\/revisions\/39883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21121"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}