0

Is it possible to set only two rounded corners of a button in nativescript ? I am not sure if specifying radius as a css property would work, since radius rounds all the four corners, while I can't seem to find a semi circle or semi-ellipse in clip path.

basum
  • 319
  • 1
  • 3
  • 18

3 Answers3

0

Currently NativeScript supports uniform border-radius only. You can try to set a polygon clip path. Here is an example of a polygon clip path that clips a star:

<Button text="polygon" style="background-color: magenta; border-width:2; border-color: red; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" row="3" />

This might help you with rounding the corners with a clip path.

Community
  • 1
  • 1
Rossen Hristov
  • 43
  • 4
0

You can use also this tool to generate clip-paths: http://bennettfeely.com/clippy/

Vladimir Enchev
  • 815
  • 7
  • 12
0

I needed something like a chat bubble so I wrapped rounded labels inside a container -like stacklayout- and set the left/right-margins off the container.

Nabil.A
  • 581
  • 4
  • 16