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 Responsive Web Design and Testing Website Testing

Posted by iwgpnjvycw
iwgpnjvycw
8,577 Points

On the About Page, I still can't get the border radius to work. I'm using the Instructor's corrected code for Firefox

It just stays square-shaped. Here's the code I'm using.

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

3 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

For what I see your code is correct, check you HTML code.

 <section>
 <img src="img/nick.jpg" alt="Name" class="profile-photo">
 <h3>Title</h3>
 <p>Text.</p>
</section>

If the HTML is also correct, try to set the border-radius with pixels (px).

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Try adding the mozilla prefix, while using the unprefixed version in browsers that support it:

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  -webkit-border-radius: 100%; /* for webkit based browsers like chrome */
     -moz-border-radius: 100%; /* for firefox */
          border-radius: 100%; /* unprefixed */
}
iwgpnjvycw
iwgpnjvycw
8,577 Points

I still can't get it to work, but thanks for the suggestion! I'll keep trying.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

In that case, according to this section on MDN, there can be an issue in Firefox with clipping images if overflow: visible; has been set on the image somewhere. You might try adding overflow: hidden; to your .profile-photo.

Carramia Sellers
Carramia Sellers
482 Points
Carramia Sellers
Carramia Sellers
482 Points

Thank you Jeff! I was having the same problem as Bianca. I added "clear: both;" to my CSS and my profile pic is displaying perfectly now.