Border-radius-top-left is not working


I am trying to curve my button from specific corners, but it is not working with my NativeScript App. Here is my CSS code:

I have tried to add px at the end, but it does not work with Angular2 CSS. I also tried to put them all in one line like this:

border-radius: 3px 3px 0px 0px;

but it did not work with and without px.


You don’t need to specify any units for the border radius. What’s your CSS code and XML for the button?


have you taken a look at the built-in themes? There’s a way to simply round buttons, and worst case, you could look at the css and see how it’s done there, as a sample



It appears that nativescript doesn’t support individual border-radius properties for corners. In other words, right now nativescript can only round all the corners at once to the same border-radius property or not at all.

That being said, you can achieve a similar effect using clip-path. Check out the details here:


NativeScript now (4.x) supports partial border radiuses on labels and buttons.
Android is simpler, but there are some odd behaviors on iOS.
In my experience, you must set border-radius: 0px and a non-zero border-width. explicitly first to force iOS to start considering border-radiuses. If you try to just set border-top-left-radius without setting border-radius or border-width iOS seems to ignore it. You must establish a baseline and then override the corners you want.

YMMV, but that works for me.