{"id":1323,"date":"2017-10-03T07:42:09","date_gmt":"2017-10-03T13:42:09","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1323"},"modified":"2018-06-04T14:48:24","modified_gmt":"2018-06-04T18:48:24","slug":"how-to-make-a-rectangle-with-rounded-corners-in-a-powerapp","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-make-a-rectangle-with-rounded-corners-in-a-powerapp\/","title":{"rendered":"HOW TO: Make a rectangle with rounded corners in a PowerApp"},"content":{"rendered":"<p>I&#8217;m working on a PowerApp with Microsoft and my team right now that has a design which includes\u00a0a rectangle with rounded corners. Here&#8217;s what it looks like, notice the rounded corners.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1324\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1.png\" alt=\"\" width=\"398\" height=\"695\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1.png 398w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1-172x300.png 172w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1-84x146.png 84w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1-29x50.png 29w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA1-40x70.png 40w\" sizes=\"auto, (max-width:767px) 398px, 398px\" \/><\/a><\/p>\n<p>To implement the design, you may\u00a0think the rectangle icon is where you start.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1325\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2.png\" alt=\"\" width=\"264\" height=\"424\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2.png 264w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2-187x300.png 187w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2-91x146.png 91w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2-31x50.png 31w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA2-44x70.png 44w\" sizes=\"auto, (max-width:767px) 264px, 264px\" \/><\/a><\/p>\n<p>However, you will quickly find the rectangle icon does not currently include a Radius property that allows you to round the corners.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1326\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3.png\" alt=\"\" width=\"320\" height=\"590\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3.png 320w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3-163x300.png 163w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3-79x146.png 79w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3-27x50.png 27w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA3-38x70.png 38w\" sizes=\"auto, (max-width:767px) 320px, 320px\" \/><\/a><\/p>\n<p>To implement the rounded corners on a rectangle, simply add a Button control to your PowerApp and set the Radius property, then delete the Text from the button and disable it.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1327\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4.png\" alt=\"\" width=\"320\" height=\"541\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4.png 320w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4-177x300.png 177w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4-86x146.png 86w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4-30x50.png 30w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2017\/10\/PA4-41x70.png 41w\" sizes=\"auto, (max-width:767px) 320px, 320px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m working on a PowerApp with Microsoft and my team right now that has a design which includes\u00a0a rectangle with rounded corners. Here&#8217;s what it looks<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[88,104,121],"tags":[122,112],"class_list":["post-1323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office","category-office-365","category-powerapps","tag-how-to-powerapps","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1323"}],"version-history":[{"count":1,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions"}],"predecessor-version":[{"id":1330,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions\/1330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1329"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}