React-native: Border color bleeding bug when border radius is set.

[joonhocho]

As you can see in the picture, border colors are bleeding when borderRadius is set.
It only happens when I use corner border radius such as borderBottomLeftRadius, borderBottomRightRadius.

Here's style for the node:

    borderWidth: StyleSheet.hairlineWidth,
    borderRightWidth: StyleSheet.hairlineWidth,
    borderBottomWidth: 2 * StyleSheet.hairlineWidth,
    borderColor: colors.itemBorder,
    borderRightColor: '#bbbcbd',
    borderBottomColor: '#bbbcbd',
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
    overflow: 'hidden',

I've tried with different colors and it still happens.

Tested both on iOS simulator and real device iPhone 6 Plus. Same bug.
Haven't tested on Android.

[thomasobrien99]

+1 to this issue, screenshot from iPhone 6. Style for node is:
scaleLevels: {
backgroundColor: colors.deepSkyBlue1,
borderColor: colors.deepSkyBlue1,
borderRadius: dimensions.borderRadius, // 4
borderWidth: dimensions.borderWidth, // 1
flexDirection: 'row'
},
scaleLevel: {
alignItems: 'center',
borderColor: colors.deepSkyBlue1,
borderLeftWidth: dimensions.borderWidth // 1,
flex: 1,
height: dimensions.scaleLevelHeight,
justifyContent: 'center'
},
scaleLevelFirst: {
borderBottomLeftRadius: 3,
borderLeftWidth: 0,
borderTopLeftRadius: 3
},
scaleLevelLast: {
borderBottomRightRadius: 3,
borderTopRightRadius: 3
}

[thomasobrien99]

Doesn't seem to affect smaller devices

[jevakallio]

There was an issue https://github.com/facebook/react-native/issues/6082 that was closed by @lacker for lack of reproducible example.

Here's a minimal repro on RNPlay: https://rnplay.org/apps/XiWz1g - It appears this issue happens when you provide border radius to some corners, but not all. Affects iOS only.

[MiLeung]

Same issue. Any janky code workarounds for this issue yet?

Edit: only happens on physical device (iPhone 6 for me, but probably others as well); not on simulator though.

[code-by]

Same problem for Android. borderRadius / borderColor not works together

[bedemiralp]

This problem is also reported under #11897

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[alenia]

@MiLeung the janky workaround is to not put a border on the edge opposite the radius

A   _____________ B
  |              | 
  |              | 
  |_____________/ 
D                 C

for a quadrilateral ABCD if corner C has a border radius, then edge AD should not have a border (considering putting a border on its neighbor instead)
I.E. if borderTopRightRadius = 4, then if the bottom right corner has an artifact borderBottom should be 0 (or the borderBottomRightRadius should be defined)