'How to add border radius to next js image?
i have problem with Next.js image component when i add objectFit="cover" to Image my border radius disappears. can anyone help?
Solution 1:[1]
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
Solution 2:[2]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | arman amirkamali |
| Solution 2 |