Rounded Corners

Carina shared this question 6 years ago
Answered

Is there a way to create rounded corners for text boxes and or dropdown boxes? Thanks!

Comments (10)

photo
1

Sure, just remove the border of the input and place it above a rectangle with rounded borders.

photo
1

That answer doesn't make a ton of sense. How do you input a rectangle with rounded borders?

photo
1

You need two components the rectangle to simulate the rounded border, and the text field(without border) above the rectangle where the user input the text.

photo
1

How do I make rounded corners for images?

photo
1

Create a rectangle with rounder corners, and then set the image as the background of the figure. You can find this option to add a background image into the 'Background' section from the "Properties" panel.

photo
1

Unfortunately, once the image is set as the background of a rectangle it's almost always much too big, and you only see a tiny part of the image. There's no way that I can see to manually reduce the image's size once it's in the rectangle. Does this mean that all the images I import have to roughly the same size as the rectangle before I attempt to do this?

photo
1

I'm afraid you'll need to do just what you said. I wrote down your problem so we can take a look how complicated would be to add the rounded corner property to the 'Image' widget in a future release.

photo
1

Dear Carles,


Exactly the suggestion I was going to make. Rounded corner property is not available on Images unfortunately. That would be GREAT.


The simulation I am working on will dynamically display images as icons to tap on for the user (on page load). As there is no way to change the background dynamically in an event (Change Style, Background would let me enter a calculated ...), that could have been a workout working with buttons, we don't have any option left. Of course we could prepare the images outside of prototyper ourselves but it would be a lot of work and another environment needed just to create rounded corners.


So please consider the rounded corner property most everywhere, on any object.


Best regards.

photo
1

+1 for rounded corner in images (without using the workaround mentioned above)

photo
1

Why rounded corners are attached to borders? its a bad UX not intuitive, if you dont want borders. and also, the same rounded value visually changes with different border weights. makes no sense to me. rounded corners should be sepparated from borders.