Search code examples
csssafarigatsbygatsby-imageborder-radius

Border-radius on image not working on mobiles - safari

I have seen that similar posts already exist... the solutions posted there did not work for me tho. Sorry for asking again.

In my gatsby project I want a solid border and border-radius on an image. On Chrome it looks as expected but on mobile devices and Safari the image just does not get the rounded corners and overflows the border. How can I fix this?

.imgContainer {
  border: solid 1px #0784b5;
  border-radius: 10px;
  overflow: hidden;
}

.img {
  position: relative;
  border-radius: 10px;
  top: 0;
  left: 0;
}
<div className={styles.imgContainer}>
  <GatsbyImage className={styles.img} 
  image={data.file.childImageSharp.gatsbyImageData} 
  alt="portrait" 
  />
</div>

Expected output

How it looks on Safari

Thanks in advance!!

Solution

  • The gatsby-image package is now deprecated

    You can use: https://www.gatsbyjs.com/plugins/gatsby-plugin-image/

    Ex:

    import { StaticImage } from 'gatsby-plugin-image';

const IndexPage = () => (
  <StaticImage
    src="../images/test_image.jpg"
    alt=""
    imgStyle={{ borderRadius: '20%' }}
  />
);