react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

borderRadius doesn't accept % or 0 in v4

Open lucafaggianelli opened this issue 9 months ago • 3 comments

Describe the bug

In v3 borderRadius="100%" was valid, in v4 is not anymore

To Reproduce

In v3 I was using this code for setting a border radius on an image, though upgrading to v4, this is throwing an exception Invalid border radius 100%:

<Image
          src={resume.basics.image}
          style={{
            borderRadius: (theme.imageRadius || 0) + '%',
          }}
        />

I tried to remove the % and it worked, but when I use 0 as value I receive the error Invalid border radius undefined.

Finally I was able to find a workaround using the 4 borderRadius props instead of the shorthand, this works:

<Image
          src={resume.basics.image}
          style={{
            width: theme.imageSize,
            borderTopLeftRadius: (theme.imageRadius || 0) + '%',
            borderTopRightRadius: (theme.imageRadius || 0) + '%',
            borderBottomLeftRadius: (theme.imageRadius || 0) + '%',
            borderBottomRightRadius: (theme.imageRadius || 0) + '%',
            marginLeft: 36,
            marginRight: 20,
            objectFit: 'cover',
          }}
        />

https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e619da74e54024a37e183b0ca10013b06c00880059428001c2002e00f4ba30a1e8c3401b0c00e942325d266ca8013dcf600deaeefdca008c41c80261872004a3cfe48083a3000e4008c000cf100a4d100349e3200be991994ba4222babc020554ba740cccacec0400dc64640062e0501672187c48d041781e940066c648a68eda3100f21000ee3ca6fe691cf2c063d16a9a3afafd2d10167cd03c5048c056208cba10ba20d3b3feba006eb100ccba009a00fa002a00d2006a006c200007001d440776f00155fc8f461bc001a004e1e001059116753f5a2644c9d41a646086078c028170688d368b102723c15110a874161f2b8a00

Expected behavior I expect the same behavior as in v3 with the shorthand borderRadius to accept 0 and %

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. MacOS, Windows]
  • Browser [e.g. chrome, safari]
  • React-pdf version [e.g. v1.1.0]

lucafaggianelli avatar Mar 27 '25 16:03 lucafaggianelli

I have same issue

islam-kamel avatar Apr 09 '25 10:04 islam-kamel

Can confirm this is working on 3.4.5 (last 3.x version) and not on 4.0.0

Laurens256 avatar Apr 28 '25 07:04 Laurens256

FWIW the style docs do not list, and apparently have never listed borderRadius as a property but do list the 4 individual properties.

pat-encoura avatar Jul 02 '25 22:07 pat-encoura