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 fc2cd0c5d0f..2048fc6a926 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 @@ -605,6 +605,7 @@ public class CSSBackgroundDrawable extends Drawable { } // 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 @@ -615,6 +616,10 @@ public class CSSBackgroundDrawable extends Drawable { 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; @@ -661,10 +666,10 @@ public class CSSBackgroundDrawable extends Drawable { // (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,