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
Andy Bargh
Courses Plus Student 2,891 PointsCan 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
28,690 PointsSetting 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.
Luke Glazebrook
13,564 Points50% 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%.
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Luke Glazebrook
13,564 PointsOh thanks for the correction! My mistake.
Andy Bargh
Courses Plus Student 2,891 PointsSurely it sets the corner radius to 50% of the images width... which if you do it on all sides IS a circle?
Andy Bargh
Courses Plus Student 2,891 PointsI guess it depends on whether the image is a square or not...
Andy Bargh
Courses Plus Student 2,891 PointsThanks for the input guys. Was just a bit confused as the video recommended setting it to 100%. Thought I hadn't understood it.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsTo 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.