How to make nextjs circular

Question

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'/>

score 1 · Answer 1 · answered Feb 23 '22 at 02:11

1

Add this to your css file.

img {
  border-radius: 50%;
}

answered Feb 23 '22 at 02:11

rodrigodh

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 23 '22 at 08:17

score 0 · Answer 2 · answered Feb 23 '22 at 01:42

0

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)

answered Feb 23 '22 at 01:42

421

203
1
5
13

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 23 '22 at 08:27

m.js · Answer 3 · 2023-05-31T21:47:48.377

@rodrigodh's answer seems to make ALL of your img elements fully rounded, this may be considered bad practice in a real world scenario (depending on your use case). If this is not the desired effect, you can add inline style to a specific Next.js Image component:

style={{ borderRadius: '50%', overflow: 'hidden', width: 24, height: 24 }}

@421's answer seems to use SCSS where the styles prop is used. Again, if you don't use this method, you can just use inline styles or use your CSS in whatever way you prefer.

On the Next.js docs for the Image component, they use inline styles but pass the object via a named variable to the custom style prop on Image like this:

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
};
 
export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />;
}

But do note, you may need

overflow: 'hidden'

depending on your Next.js version (can't be too specific here, I am on 13.1.6 and I do need it). The height and width styles are also often required, even though these same properties are added to the Image component themselves (and are required props, along with "alt").

The same can be done if you use TailwindCSS:

className='rounded-full overflow-hidden w-[24px] h-[24px]'

As a footnote on TailwindCSS, the last time I tried the Next.js docs approach I couldn't seem to get the inline style they provide to work on 13.1.6 when using MantineUI, so I use this approach and wrap the Image in a surrounding div:

<div className='flex items-center'>
  {users?.map((user: User) => {
    return <div
      key={id}
      className='border-2 border-indigo-500 rounded-full overflow-hidden w-[28px] h-[28px]'
    >
      <Image
        width={24}
        height={24}
        src={user.photo}
        alt='user_photo'
      />
    </div>
  })}
</div>

Happy rounding! - A developer that already had this problem.

How to make nextjs circular

3 Answers3