Border-radius-top-left is not working


#1

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

border-bottom-left-radius:10;
border-top-left-radius:10;
border-top-right-radius:0;
border-bottom-right-radius:0;
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.


#2

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


#3

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


#4


#5

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: https://github.com/NativeScript/NativeScript/issues/2152


#6

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.