[^0.71.0] - borderLeftColor and borderRightColor is not rendered properly

[lfrallon]

Description

I apologise in advance if this is not the right place to submit an issue like this.

Version

0.71.2

Output of npx react-native info

System:
OS: Linux 6.1 Fedora Linux 37 (Workstation Edition)
CPU: (4) x64 Intel(R) Core(TM) i3-4030U CPU @ 1.90GHz
Memory: 983.09 MB / 7.21 GB
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Watchman: 20221126.133621.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28, 29, 30, 31, 33
Build Tools: 24.0.0, 24.0.1, 24.0.2, 24.0.3, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 19.0.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: ^0.71.0 => 0.71.2
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

The usual way to run the react-native app.

Snack, code example, screenshot, or link to a repository

import React from 'react';
import {
 StyleSheet,
 View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';

const App: React.FC = () => {
 return (
 <SafeAreaView style={[styles.container]}>
 <View style={styles.scanRegion}>
 <View style={styles.scanRegionContainer}>
 <View style={styles.scanTopRegion}>
 <View style={styles.topLeftRegion} />
 <View style={styles.topRightRegion} />
 </View>
 <View style={styles.scanBottomRegion}>
 <View style={styles.bottomLeftRegion} />
 <View style={styles.bottomRightRegion} />
 </View>
 </View>
 </View>
 </SafeAreaView>
 );
}

export default App;

const styles = StyleSheet.create({
 bottomLeftRegion: {
 borderLeftWidth: 6,
 borderBottomWidth: 6,
 borderBottomLeftRadius: 20,
 borderLeftColor: '#FFFFFF',
 borderBottomColor: '#FFFFFF',
 width: 50,
 height: 50,
 },
 bottomRightRegion: {
 borderRightWidth: 6,
 borderBottomWidth: 6,
 borderBottomRightRadius: 20,
 borderRightColor: '#FFFFFF',
 borderBottomColor: '#FFFFFF',
 width: 50,
 height: 50,
 },
 container: {
 flex: 1,
 },
 scanRegion: {
 position: 'absolute',
 top: '20%',
 left: '15%',
 width: '70%',
 height: '30%',
 },
 scanRegionContainer: {
 padding: 20,
 flex: 1,
 },
 scanBottomRegion: {
 flexDirection: 'row',
 justifyContent: 'space-between',
 },
 scanTopRegion: {
 flex: 1,
 flexDirection: 'row',
 justifyContent: 'space-between',
 },
 topLeftRegion: {
 borderLeftWidth: 6,
 borderTopWidth: 6,
 borderTopLeftRadius: 20,
 borderLeftColor: '#FFFFFF',
 borderTopColor: '#FFFFFF',
 width: 50,
 height: 50,
 },
 topRightRegion: {
 borderRightWidth: 6,
 borderTopWidth: 6,
 borderTopRightRadius: 20,
 borderRightColor: '#FFFFFF',
 borderTopColor: '#FFFFFF',
 width: 50,
 height: 50,
 },
});