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 Responsive Web Design and Testing Adjust the Profile Page and Header

Daniel Bromilow
Daniel Bromilow
796 Points
Posted by Daniel Bromilow
Daniel Bromilow
796 Points

'Border-radius' not affecting profile photo?

When I alter the percentage of the border radius, my profile photo remains a square as opposed to the circular example shown in the tutorial when the radius is changed to 20%

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

can you post your code?

3 Answers

Marcus Polk
Marcus Polk
1,955 Points
Marcus Polk
Marcus Polk
1,955 Points

Be sure you're selecting the correct img element in your css file. Try just adding this to the bottom of your css:

img { border-radius: 100%; }

That should make every image become a circle. That'll let you know that it's working in your browser and from there I'd make sure that the class I selected was correct and matched the class in the html file. Good luck.

Rostislav Kavan
Rostislav Kavan
6,818 Points
Rostislav Kavan
Rostislav Kavan
6,818 Points

You might also need to add browsers' prefixes. For the older ones.

Be sure no other rules rewrite this one.

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Daniel Bromilow:

The problem with your is the fact it should be border-radius: 50%, not `border-radius: 100%; on the safe side you should add browser vender prefixes which may also be your problem if your browser if a bit old. If you decide to use browser-prefixes, make sure it is after the browser-prefixed version: 

.profile-pic { 
  width: 88px;
  height: 88px;
  -webkit-border-radius: 50%;
 -moz- border-radius: 50%;
  border-radius: 50%;
}

To read more about the border-radius spec go here

Regarding Browser Prefixes

You can benefit from using autoprefixer or prefix-free to not worry about browser prefixes. You can also use Compass if you're using Sass using +border-radius(50%) (Sass, the most efficient way to use Sass) or `@include border-radius(50%)

.profile-pic { 
   @include border-radius(50%);

   width: 88px;
  height: 88px;
}