How to make nextjs <Image /> circular-CodePudding

How do you create a circular image using nextjs Image? I have found that the solution involving wrapping the image in divs with border radius and hidden overflow isn't working.

import Image from 'next/image'

<Image src={props.profilePictureURL}  height={200} width={200} alt='IMG2'/>

CodePudding user response：

Answer:

<Image src={props.profilePictureURL}  className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>

where:

.makeImageCircular {
  border-radius:50%;
}

*mistakenly set 50% to '50%' (within a string in CSS)

CodePudding user response：

Add this to your css file.

img {
  border-radius: 50%;
}