diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java index eace0d459e75de..bf5c1994e6e4ad 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java @@ -645,6 +645,7 @@ private void updatePath() { } // Clip border ONLY if its color is non transparent + float pathAdjustment = 0f; if (Color.alpha(colorLeft) != 0 && Color.alpha(colorTop) != 0 && Color.alpha(colorRight) != 0 @@ -655,6 +656,10 @@ private void updatePath() { mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; mInnerClipTempRectForBorderRadius.left += borderWidth.left; mInnerClipTempRectForBorderRadius.right -= borderWidth.right; + + // only close gap between border and main path if we draw the border, otherwise + // we wind up pixelating small pixel-radius curves + pathAdjustment = mGapBetweenPaths; } mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f; @@ -709,10 +714,10 @@ private void updatePath() { // (mInnerClipTempRectForBorderRadius), ensuring the border can be // drawn on top without the gap. mBackgroundColorRenderPath.addRoundRect( - mInnerClipTempRectForBorderRadius.left - mGapBetweenPaths, - mInnerClipTempRectForBorderRadius.top - mGapBetweenPaths, - mInnerClipTempRectForBorderRadius.right + mGapBetweenPaths, - mInnerClipTempRectForBorderRadius.bottom + mGapBetweenPaths, + mInnerClipTempRectForBorderRadius.left - pathAdjustment, + mInnerClipTempRectForBorderRadius.top - pathAdjustment, + mInnerClipTempRectForBorderRadius.right + pathAdjustment, + mInnerClipTempRectForBorderRadius.bottom + pathAdjustment, new float[] { innerTopLeftRadiusX, innerTopLeftRadiusY,