How to add border radius to next js image?

Use overflow: hidden on the div wrapping the image:

<div style={{borderRadius: '5px', overflow: 'hidden'}}>
  <Image src="..." layout="fill" objectFit="cover" />
</div>

You can simply add className="rounded-full"

Ex:

<Image src="..." layout="fixed" className="rounded-full"/>

EDIT: I realised that I was using Tailwind CSS at the time I wrote this answer. You can use overflow:hidden as mentioned in the accepted answer

you can add a class to your image and change css in global css. beware you can not change your class attribute in jsx css or inline style

The accepted answer worked for me for the image itself but when I used placeholder="blur" with blurDataURL="..." the position of the placeholder was a little bit off and it got cut off. What I ended up doing is defined the size of the wrapper explicitly which was equal to the image size:

<div style={{ borderRadius: '50%', overflow: 'hidden', width: '48px', height: '48px' }}>
  <Image
    src="..."
    objectFit="cover"
    width="48px"
    height="48px"
    placeholder="blur"
    blurDataURL={data:image/...}
  />
</div>