Search code examples
cssgatsby

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

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. (i.e. the image is square only on iPhone / iPad, I didn't see border-radius:25px being applied to the image)

EDIT 11-24: sorry this is the code snippet I'm using styled-component

export const MyImageContainer = styled(GatsbyImage)`
  cursor: pointer;
  border-radius: 25px;
`
Solution

  • 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%;
   }
`