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 Paal Kristian Minne
Paal Kristian Minne
2,548 Points

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
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.

Paal Kristian Minne
Paal Kristian Minne
2,548 Points

Thanks, it worked well with px values.

Dan Martin
Dan Martin
33,150 Points
Dan Martin
Dan Martin
33,150 Points

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

Dan Martin
Dan Martin
33,150 Points
Dan Martin
Dan Martin
33,150 Points

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

Dan Robson
Dan Robson
1,171 Points
Dan Robson
Dan Robson
1,171 Points

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.