tranparent borderColor broken when using borderRadius

[ahmadi-akbar]

header: {
alignItems: "center",
borderWidth: 1,
borderColor:'red',
borderTopColor: "transparent",
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
paddingVertical: 10,
margin:10,
marginBottom: 20,
}

this style make =>

header: {
alignItems: "center",
borderWidth: 1,
borderColor:'red',
borderTopColor: "transparent",
// borderBottomLeftRadius: 15, //commented
// borderBottomRightRadius: 15, //commented
paddingVertical: 10,
margin:10,
marginBottom: 20,
}

and this style make =>

this occur only on Android

React Native version:

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 5.71 GB / 15.87 GB
Binaries:
Node: 10.16.0 - E:\Install\nodejs\node.EXE
Yarn: 1.16.0 - E:\Install\yarnCache\global\Data\node_modules.bin\yarn.CMD
npm: 6.9.0 - E:\Install\nodejs\npm.CMD

https://snack.expo.io/@ahmadi-akbar/android-bordercolor-overriding-issue

[RobinCsl]

Hi @ahmadi-akbar,

This behaviour is indeed strange.

As a workaround, you can replace borderTopColor: "transparent" by borderTopWidth: 0, and you will get the same consistent output on both iOS and Android:

Hope that helps!

[ahmadi-akbar]

Hi @ahmadi-akbar,

This behaviour is indeed strange.

As a workaround, you can replace borderTopColor: "transparent" by borderTopWidth: 0, and you will get the same consistent output on both iOS and Android:

Hope that helps!

It's work and make sense
thank for your answer 🙏

[cabelitos]

Hello @ahmadi-akbar and @RobinCsl I submitted a fix for this problem. Comments and suggestions are appreciated.

Here's the PR: #25649

Thank you.

[ahmadi-akbar]

hello there @cabelitos
thank to you and your great effort
i hope they may accept your pull request