Is the border-radius property working differently then in CSS

Unity Engine
,
1

I was trying to make a Button in UI Toolkit with USS but it looks like border-radius isn’t working the same as it does in CSS.

I have the following HTML which makes the corners be fully rounded.:

Hello this is a long text

9777177--1401681--upload_2024-4-17_21-40-56.png
9777177--1401681--upload_2024-4-17_21-40-56.png1927×779 32.7 KB

However when I try to do this in the Unity UI Toolkit and I give my VisualElement a border-radius of 9999px it makes the whole button round instead of only the corners.

9777177--1401672--upload_2024-4-17_21-39-6.png
9777177--1401672--upload_2024-4-17_21-39-6.png1903×918 109 KB

How would I be able to make the corners fully rounded like it works in HTML CSS.

2

Yes, USS borders differ from CSS borders. When provided with a pixel unit, CSS border will “clamp” the radius in both x and y axes. But if you use say a percent value such as 100% for the border radius, it will essentially behave like USS.

This is not something we plan to change. If you want to get the same result, you should use a border-radius value that matches the height of the element.

1 Like
3

Thank you @mcoted3d for the quick answer.

So if the button is dynamic in height I should do this most likely through code? Or can I use a runtime binding?

4

I think you will have to do it through code at this time, maybe through a GeometryChangeEvent.

1 Like