Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Adding Pages to a Website Style New Pages

Posted by Holly Holliday
Holly Holliday
1,563 Points

I can't get my corner radius to make a round photo

I have copied the following css to make my corners round on my photo and it won't work

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Any suggestions?

sean shea
sean shea
22,104 Points

give this a go

.profile-photo{width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; }

Holly Holliday
Holly Holliday
1,563 Points

thank you. I wonder why the code that the video gave me won't work.

Maddalena Menolascina
Maddalena Menolascina
6,668 Points

I had the same issue and I ended up specifying all for radius and it worked: border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; but still following the teacher code,except that I like square pictures with rounded edges ;)

2 Answers

Aaron HARPT
Aaron HARPT
19,845 Points

I tried your code out in my own browser and it worked. You may want to look to make sure you are targeting the correct element and that you are correctly linking to your css. hope that helps

Joseph Damiani
Joseph Damiani
1,066 Points
Joseph Damiani
Joseph Damiani
1,066 Points

Notice that Nick's photograph is 512px x 512px versus your own photographs pixel size. None of the threads about this topic worked to convert the oval to a circle. When I resized my image to 512px x 512px is when it worked.