Vertical borders leave gaps on rounded Views #33950

Description

When using top or bottom borders on rounded Views, it will leave gaps on Android (this does not occur on left and right), also the design differs greatly between platforms, especially compared to the expected web version. See snack and more screenshots below for examples on border design differences

Gap example:

Version

0.68.2

Output of npx react-native info

System:
OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
Memory: 3.97 GB / 7.72 GB
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 28, 29, 30, 31
Build Tools: 28.0.3, 29.0.2, 30.0.2, 31.0.0
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Add borderBottomWidth or borderTopWidth to any View with any borderRadius and it will not wrap properly on Android and IOS will greatly differ from the Web Version.

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

Snack: https://snack.expo.dev/@douugbr/vertical-borders-bug

Web (Details: Microsoft Edge 64-bit, Version: 101.0.1210.53):

Snack IOS Emulator:

PS.: Android Snack emulator shows the same as my Redmi Note 7