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

Border radius does not work in chrome?

Hi!

I'm having troubles with the CSS in this example. I've tried to apply the CSS as shown in the video to an image and it's not working in chrome. It works just fine in firefox. Does anyone know if this is a know problem and have a work around to it?

The HTML and CSS for the picture:

<img src="img/pk.jpg" alt="Picture of Paal Kristian." class="profile-photo">
.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

4 Answers

Nachiket Kumar
Nachiket Kumar
3,590 Points

Apparently percentage values are not supported in Chrome. See here, and try with a px value to confirm.

Thanks, it worked well with px values.

Test an image that has the same width and height. Border-radius percentage definitely works in chrome.

Oh wait, try wrapping the image with a an inline-block div and apply your border-radius to that div.

I was having this problem in firefox, In the video Nick does not add the clear property. I used this in firefox and this solved the problem.