Nativescript: Specify different border-radius values for each corner

[okmttdhr]

Is it possible to specify different border-radius values for each corner as I can with CSS in browsers? (Or is there any workarounds?)
I tried code like below on my iOS emulator, but it didn't make any change.

border-radius: 20 0 0 20;

• NativeScript CLI: 2.0.0
• tns-core-modules: 2.0.1
• tns ios Runtime: 2.0.0

I'll appreciate your help.

[tsonevn]

Hi @okmttdhr,
Thank your for the interest of NativeScript.

NativeScript do not support border radius for specific corner of our ui components. I have made a little research and I found that you could use our new css property clip-path for this purpose. I will give you an example in below attached code snippets.

app.css

button {
   background-image:url('https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/ce/maldives.jpg');
   width: 200px;
   height: 200px;
   clip-path: polygon(100% 23%, 96% 18%, 94% 15%, 89% 10%, 84% 6%, 79% 3%, 73% 0%, 0% 0%, 0% 100%, 100% 100%);
 }

mian-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
    <Button text="TAP" tap="onTap" />
  </StackLayout>
</Page>

Let me know whether this helps.
Kind regards,

[okmttdhr]

It worked perfectly!

Actually I used clip-path like below;

width: 100;
height: 30;
clip-path: ellipse(50% 80% at 60% 50%);

result;

Thank you for your help!

[evanfuture]

On the off chance that someone runs across this like I did, Nativescript now does support border radius for specific corners. You can set border-top-right-radius: 4 and it will just work.

https://github.com/NativeScript/NativeScript/blob/8973a6febde4a4b41637d80b17506a7d25ffebf8/tns-core-modules/ui/styling/style-properties.ts#L896

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.