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

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

Posted by Nicole Wolcott
Nicole Wolcott
897 Points

border-radius not affecting any change to my image

I am following along with building a website: I have put a border-radius: 100%; to my image for my "About" page, but it is not changing the shape of my image. The image is not responding to the other directives either. Can someone please look and tell me where my mistake is. I have included both the html with "class" below and the CSS code

<img src="pics/SusieHeadshot.jpg" alt="Photograph of Susie Wolcott" class="profile-photo">

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

Thank you for any help

Nicole Wolcott
Nicole Wolcott
897 Points

trying to give you all "best answer" thanks for the help

2 Answers

Marco Koopman
Marco Koopman
5,290 Points

Hey Nicole!

You forgot a ; sign after margin: 0 auto 30px;

try:

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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You've indicated that you've set border-radius to 100%. But according to the code you posted, it's set to 20px. The easiest way for us to help you troubleshoot this would be to see a snapshot of your workspace. This can be accomplished by clicking the camera icon on the upper right-hand side of your workspace and posting the link here.

But before we do that, let's check some basics first. Make sure you've saved your files. Open the preview and refresh the page. If you still do not notice a difference, try clearing your browser cache or viewing it in a different browser. There is the chance that it's loading in cached data instead of your newly altered file. :sparkles:

And Marco Koopman is correct. You're missing a semi-colon in your CSS.