Non-uniform border mask path overlaps borderRadius

[macintoshhelper]

| -------------------------------------------------------------------------------------------------

Reporting a bug or issue

The border path polyfill (Border (<position>) mask) for borderLeftWidth, borderRightWidth, etc, for uneven borders, doesn't match the borderRadius of a <View>.

Expected behavior:

Observed behavior:

(Example with uneven borderRadius)

How to reproduce:

(
  <View
    style={{
      width: 60,
      height: 60,
      borderRadius: 6,
      borderTopLeftRadius: 12,
      borderBottomLeftRadius: 12,
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      borderRightWidth: 0,
      borderLeftWidth: 2,
      borderTopWidth: 2,
      borderBottomWidth: 2,
      borderColor: 'green',
      backgroundColor: 'blue',
    }}
  />
)

Sketch version:

63.1

GitHub Project:

Code that's affected by this issue: https://github.com/elemental-react/primer/blob/918f8f0061e9902ac3bc09e5e28db370e603a912/src/buttons/ButtonGroup.jsx#L12

Can be run from https://github.com/elemental-react/primer/tree/master/examples/sketch

[mathieudutour]

oh interesting. That's actually pretty hard to fix

[macintoshhelper]

The border path masks could be replaced with a single Svg path, that can replace the ShapeGroup rectangle). Would need a function to generate the <Path> data from the rounded corners. Can pass the borderColor into <path fill="#color" and pass in the border width to the path generator function.

[mathieudutour]

Yeah but when you have just a top border, the path is super weird

[SaiVamshiin]

You can try adjusting the values of the border-radius property to see if you can find a combination that works with the border path polyfill.