CSS Border Radius doesn't work in Safari after switching to gatsby-plugin-image-CodePudding

CSS Border Radius doesn't work in Safari after switching to gatsby-plugin-image

on my laptop I can see the border radius of the image, but it doesn't seem to work on iphone or iPad.

CodePudding user response：

Yes, that is an old 'bug'. This css hack should fix it.

-webkit-mask-image: -webkit-radial-gradient(white, black);

CodePudding user response：

I have similar issue with border radius after migrating to gatsby-plugin-image.

Not sure if this addresses your question, you might want to add more details and some code snippets will be helpful.

I'm using styled-component for my project. My solution was to target the img

For example

export const MyImageVariable = styled(GatsbyImage)`
 border-radius: 50%;
  img {
    border-radius:50%;
   }
`