fix(iOS): displaying irregular borders on iOS Fabric (#45973)

Summary:
This PR solves [issue](#45958) with displaying irregular borders on Fabric. The same issue appears on the old architecture, but I am having a problems there, so I am pushing this fix for now.

The problem is solved by decoupling `backgroundColor` from `borderLayer` and setting `zPosition` on `borderLayer` to `1024.0f`, so that the border is always in front of the layer. The `zPosition` is compared within a layer, so it shouldn't impact outside components. I would love to hear your opinion if there is a case in which this could break.

## Changelog:

[IOS] [FIXED] - changed border display

Pull Request resolved: #45973

Test Plan:
I've checked that on RNTester Images.

![border-issues-screen](https://github.com/user-attachments/assets/e12add82-8016-4c42-833d-f396307e9423)

Reviewed By: joevilches

Differential Revision: D61119409

Pulled By: cipolleschi

fbshipit-source-id: a88912061c7a8d72eec4f4092adb076dd6ae511e

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -749,7 +749,6 @@ - (void)invalidateLayer
     layer.cornerRadius = 0;
 
     RCTBorderColors borderColors = RCTCreateRCTBorderColorsFromBorderColors(borderMetrics.borderColors);
-
     UIImage *image = RCTGetBorderImage(
         RCTBorderStyleFromBorderStyle(borderMetrics.borderStyles.left),
         layer.bounds.size,
@@ -793,20 +792,26 @@ - (void)invalidateLayer
         // In this case we can simply use `cornerRadius` exclusively.
         cornerRadius = borderMetrics.borderRadii.topLeft;
       } else {
-        // In this case we have to generate masking layer manually.
-        CGPathRef path = RCTPathCreateWithRoundedRect(
-            self.bounds,
-            RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero),
-            nil);
-
-        maskLayer = [CAShapeLayer layer];
-        maskLayer.path = path;
-        CGPathRelease(path);
+        RCTCornerInsets cornerInsets =
+            RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero);
+        maskLayer = [self createMaskLayer:self.bounds cornerInsets:cornerInsets];
       }
     }
 
     layer.cornerRadius = cornerRadius;
     layer.mask = maskLayer;
+
+    for (UIView *subview in self.subviews) {
+      if ([subview isKindOfClass:[UIImageView class]]) {
+        RCTCornerInsets cornerInsets = RCTGetCornerInsets(
+            RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
+            RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths));
+
+        // If the subview is an image view, we have to apply the mask directly to the image view's layer,
+        // otherwise the image might overflow with the border radius.
+        subview.layer.mask = [self createMaskLayer:subview.bounds cornerInsets:cornerInsets];
+      }
+    }
   }
 
   [_filterLayer removeFromSuperlayer];
@@ -902,6 +907,15 @@ - (void)invalidateLayer
   }
 }
 
+- (CAShapeLayer *)createMaskLayer:(CGRect)bounds cornerInsets:(RCTCornerInsets)cornerInsets
+{
+  CGPathRef path = RCTPathCreateWithRoundedRect(bounds, cornerInsets, nil);
+  CAShapeLayer *maskLayer = [CAShapeLayer layer];
+  maskLayer.path = path;
+  CGPathRelease(path);
+  return maskLayer;
+}
+
 - (void)clearExistingGradientLayers
 {
   if (_gradientLayers == nil) {