Designing Rounded Containers and Controls in Power Apps

Introduction

While working with the designing of controls in Power Apps, a common requirement is to have rounded corners for the controls so that it gives a better aesthetics to the look and feel of the UI.

However, by default not all controls in Power Apps have the flexibility to have rounded corners except for a few controls like Button and Text Box Control. For instance, if we add the much-used Rectangle Icon to the screen, we can understand that there is no Radius property that gives us the ability to create rounded corners.

Graphical user interface, application

Description automatically generated

Workarounds

To add the rounded corners, we can instead use Button/Text Control to simulate the look and feel.

Simulate Rounded Labels

While designing forms, we use Text Input and Labels to accept user input. Since Text Input by design have the radius function, we can add the desired radius number and manipulate the rounded look of the control

Graphical user interface, application, Word

Description automatically generated

However, in the case of labels, as there is no radius control, if we give a border to the label it will look rectangle in nature. If we need to bring the rounded look, we can remove the labels and instead add a Text input and set it to a disabled state which will prevent the user from interacting with the control and still give the label look and feel. At the same time, we can adjust the radius to define the rounded nature of the control

Graphical user interface, application, Word

Description automatically generated

Simulate Rounded Forms

While working with SharePoint List Forms, the Out of box Forms does not have any radius properties to give them a rounded feel.

Graphical user interface

Description automatically generated

To simulate the rounded look, we can place a button in the background and paste the Form on top of it. Then we can set the display mode of the button to disabled so that users don’t interact with it and set its border-radius to a value that will give the rounded look to the form. This way we can simulate the rounded look and feel by placing the actual control over a container control that has the radius property

The same way the button control can be used as containers to provide rounded information Pop up messages or confirmation dialog boxes

Graphical user interface

Description automatically generated

Summary

Thus, we saw how we can simulate rounded corners for controls that do not have the radius property to inherently give them rounded corners.

Related Articles

Author

Author

Priyaranjan KS is a Modern Workplace Architect primarily focused on developing and architecting solutions around Office 365,Power Platform and Azure.He is also a Microsoft Most Valuable Professional(MVP) and a Microsoft Certified Trainer(MCT)

Latest Articles