jcook
Topic Author
Posts: 2
Joined: 15 Jan 2025, 17:55

Border element corner radius does not match when adding thickness.

06 Mar 2025, 18:23

Hey all, discovered this while playing around with the main menu tutorial. I was looking for a way to have the image box grid on the banner clip to the rounded rectangle shape so that all the components didn't have to have matching Corner Radius values. I discovered that if Border Thickness is added then the corner radius will not match up anymore, even though the values are the same.
corner_radius_bug.png
corner_radius_bug.png (137.57 KiB) Viewed 2719 times
in the screenshot the green Border element is Corner Radius = 24 with no Border Thickness, the red Border element is Corner Radius = 24 with Border Thickness = 4

Is this expected?

Thanks
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: Border element corner radius does not match when adding thickness.

11 Mar 2025, 20:49

Yes, it is the expected behavior (the same that can be seen in WPF) as the specified radius determines the radius of the stroke geometry, which is positioned at the center of the stroke thickness:
border-radius20.png
border-radius20.png (9.29 KiB) Viewed 2707 times
You can calculate the radius of the stroked Border, to get the same outer radius of the non-stroked Border by doing:
strokedCornerRadius = desiredCornerRadius - borderThickness * 0.5
We're thinking on adding a helper in the property editor to automatically calculate this in case you want to specify the outer corner radius. Would that be helpful?
 
jcook
Topic Author
Posts: 2
Joined: 15 Jan 2025, 17:55

Re: Border element corner radius does not match when adding thickness.

14 Mar 2025, 18:12

Thanks for the explainer!
Yeah I think a helper for setting the outer corner radius would be really helpful.

Who is online

Users browsing this forum: No registered users and 3 guests