<GatsbyImage /> border-radius not working on safari

[Soneji]

Hi

I am using <GatsbyImage /> to load in a blurred background image and then it loads the proper image. The problem I am having is the blurred image shows the border-radius but when the full image loads, it does not have the border radius.

See

• Source
• file from above source
• borderRadius style from above file
• live site

This is only happening in Safari (desktop and mobile) and works fine on Chrome+Firefox

[rodneylab]

Hi Dhaval,

Did you work this out?

I was seeing something similar in Safari on my site. I added am imgStyle attribute to GatsbyImage and that seemed to fix it. For your code, you would need to try:

                                        <GatsbyImage
                                            style={{
                                                gridArea: "1/1",
                                                backgroundSize: "cover",
                                                width: "200px",
                                                height: "200px",
                                                borderRadius: "20px",
                                            }}
                                            imgStyle={{ borderRadius: "20px" }}
                                            layout="fullWidth"
                                            alt={"Picture of " + data.name}
                                            image={getImage(data.avatarFile)}
                                            formats={["auto", "webp", "avif"]}
                                        />

Keep the other style attribute as it is as that might still be needed by other browsers.

Let me know if that works,

Rodney

[Soneji]

Hey Rodney! This worked, thank you so much! :D
You're a legend