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 Make an About Page

Oron Ben Zvi
Oron Ben Zvi
14,041 Points
Posted by Oron Ben Zvi
Oron Ben Zvi
14,041 Points

Why border radius of 100% and not border radius of 50%?

Hi, Why did you choose to set the border-radius to 100% while border-radius of 50% will give the same effect?

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

HI Oron,

It may have just been personal preference.

100% causes the corners to overlap and then the browser has to proportionally reduce them back down until they do not overlap anymore which brings them back to 50%.

Here's the computed values of the individual border radii using firebug:

border-top-left-radius  75px
   .profile-photo  100% main.css (line 139)
border-top-right-radius 75px
border-bottom-left-radius   75px
border-bottom-right-radius  75px

It's not formatted as nice as in the browser but I expanded the first border radius.

It shows that the radius was set at 100% in the css but the browser reduced it to 75px or 50%.

Conceptually, you want each corner to meet the adjacent corners halfway, so 50% makes sense to me and its what the browser is going to do anyways.

Technically, as long as you have a square, any radius greater than or equal to 50% will result in a circle because the browser will reduce to 50%. Something like 170% will still produce a circle.

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

I personally find it easier to 'imagine' a circle as 100% round.

Graham Nanke
Graham Nanke
15,542 Points
Graham Nanke
Graham Nanke
15,542 Points

A circle is a 100% round line.

There is something zen about that statement.

Oron Ben Zvi
Oron Ben Zvi
14,041 Points
Oron Ben Zvi
Oron Ben Zvi
14,041 Points

So, isn't the fact that the browser need to work harder to compensate this affecting performance?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I don't know the internal workings of the browser but I would think that some extra calculations would have to be done once it realizes they overlap. Especially if one corner is 70% and an adjacent corner is 50%. It needs to scale both of these down proportionally until they add up to 100%. So it must have to run through some type of scaling calculation. I think it's a simple calculation with only a few operations.

So in a sense it would affect performance but it's probably so small as to be negligible for a single element. You probably would have to be making the browser do this a lot for a noticeable effect on performance.

I would say that it is safer to make sure your corners are not overlapping rather than relying on the browser to do it for you. The spec says they have to reduce it proportionally but what if there is some browser out there with a bug and doesn't do it correctly? If you provide the correct numbers to begin with then it shouldn't be a problem. I realize though that this is probably a very simple calculation and there's unlikely to be a bug.

I think you'll just have to make a personal choice on what you feel is best.