borderRadius not working

[exotexot]

Hi,

I'm looking to build a button as suggested here: #645

I do need the button to have rounded borders, which is usually achieved through borderRadius. But I dont get it to work with any of the svg elements. Any advice?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[rmacqueen]

I have a need for the same thing. Any update on this?

[iggirex]

Trying to give a Rect border-radius with this library is way harder than it should be. I've landed at creating a ClipPath with two ovals on either end and a rectangle in the middle. It kinda works but feels very hacky.

There's a few built in props that sound like they'd do the trick, strokeLinecap="round", strokeLinejoin="round". But they don't seem to be doing anything in my case, and I can't find an example of using these props in the docs.

[iggirex]

ANSWER:
Give your Rect the rx prop and boom you got rounded corners.

<Rect x={0} y={0} rx={5} width={100} height={30} fill={"#ff0000"} />

Having an example of this in the docs would be helpful.

[PavanKu]

Any update on this? I am also try to apply borderRadius to SVG element but its not working.

[smilingkylan]

Also need help with this! Why does overflow: 'hidden' not work for the wrapping ?

[J6ey]

I can set the border radius by styling View and wrapping the SVG element in it, and of course, set overflow: 'hidden'.

[RahulMore-Codes]

what if only a specific corner needs to be rounded?

[shahbazshueb]

setting rx and ry worked for me

[ShivamJoker]

rx tx makes the entire SVG invisible I am not sure what am I doing wrong.