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 trialPaal Kristian Minne
2,548 PointsBorder 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
3,590 PointsApparently percentage values are not supported in Chrome. See here, and try with a px value to confirm.
Dan Martin
33,150 PointsTest an image that has the same width and height. Border-radius percentage definitely works in chrome.
Dan Martin
33,150 PointsOh wait, try wrapping the image with a an inline-block div and apply your border-radius to that div.
Dan Robson
1,171 PointsI 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.
Paal Kristian Minne
2,548 PointsPaal Kristian Minne
2,548 PointsThanks, it worked well with px values.