Upvote 5

Rounded Corners

Answered Victor Conesa 12 years ago

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

Best Answer
photo

Add a border to an element and then change that border's roundness.

060f1988e0557232978ca3684a73ec05

Replies (12)
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
2

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
3

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.

photo
1

Add a border to an element and then change that border's roundness.

060f1988e0557232978ca3684a73ec05

photo
1

Are there specific size parameters for when rounded corners will actually show on a rectangle? I am unable to see rounded corners unless the rectangle is 50 px tall or taller. This is a major issue when trying to recreate designs that have rounded corners on shorter elements. Any updates on when this will be fixed??

photo
photo
1

Are there specific size parameters for when rounded corners will actually show on a rectangle? I am unable to see rounded corners unless the rectangle is 50 px tall or taller. This is a major issue when trying to recreate designs that have rounded corners on shorter elements. Any updates on when this will be fixed??

photo
1

The round parameter is a percentage, so just making that value larger should show the rounding. Have you made sure to activate the border?

photo
1

Thank you Danielle. I went to one more blog post after this one and discovered the % based value and was able to get everything set like I needed.

photo
Leave a Comment
 
Attach a file