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 Adding Pages to a Website Style New Pages

Andy Bargh
PLUS
Andy Bargh
Courses Plus Student 2,891 Points

Can you just use a CSS border-radius of 50% to make an image round?

In the video, Nick suggests setting the border-radius to 100% to make the profile image round? As far as I understand it only needs to be set to 50% to get the desired effect. Have I missed something?

5 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

Setting the border-radius: 50% will create a circle provided the width and height are the same (it is square), if it is a rectangle it will be an oval.

To add to this, anything beyond 50% will simply be scaled back down in the browser to 50%. You can achieve a circle by making the radius 60% or 189%.

Corner radii are not allowed to overlap so whenever they do, the browser must scale each one back down proportionally until they no longer overlap.

50% will not make it into a full circle it will just be a square with round edges.

To make sure it is a full circle you have to use 100%.

Hi Luke,

It might help to think of 50% as the corners meeting half way. If you rounded the corners until they met at the halfway point, you would have a circle.

Oh thanks for the correction! My mistake.

Andy Bargh
PLUS
Andy Bargh
Courses Plus Student 2,891 Points

Surely it sets the corner radius to 50% of the images width... which if you do it on all sides IS a circle?

Andy Bargh
PLUS
Andy Bargh
Courses Plus Student 2,891 Points

I guess it depends on whether the image is a square or not...

Andy Bargh
PLUS
Andy Bargh
Courses Plus Student 2,891 Points

Thanks for the input guys. Was just a bit confused as the video recommended setting it to 100%. Thought I hadn't understood it.