How to add border radius to next js image?

Question

i have problem with Next.js image component when i add objectFit="cover" to Image my border radius disappears. can anyone help?

Answer 1

Use overflow: hidden on the div wrapping the image:

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

Answer 2

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