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

border-radius:50% and border-radius:100% are affect the same way the image. Both of them make it completely circle.

Is there any resaon to use 100% ??

3 Answers

Hey there! First of all, Season's Greetings if you celebrate the holiday!

Onto your question! So when you're defining a percentage for your shape's corners, you need to think of your shape as being divided into four parts. Most probably you're defining the border-radius CSS property to a rectangle or a square. If it is a rectangle, the height and the width are of different sizes. So let's say you define a border-radius of 20%. What you're actually doing is you're putting a circle with the radius of 20% dependent of your height and width, in that corner, or an ellipse since if it's a rectangle. The property makes the corners adhere to the curvature of the circle and as a result you have rounded corners.

Now for you to understand how 50 % is no different than applying 100% as a border-radius, you need to look at it this way:

As you apply a larger border-radius the circle at that corner gets bigger and bigger. Remember those four parts I mentioned earlier? When the circle becomes big enough to extend well beyond those four parts, say 51%, it won't matter because then you're extending beyond the shape itself. Here's an image which I hope serves as better explanation.

http://s2.postimg.org/z3lwf51zd/corner.png

The orange circles in the corner are of 25% border-radius, and the four red circles in the middle overlapping each other which you'll probably only see as one are of 50% border-radius.

I'd recommend you take a look at what Mozilla had to say on this CSS property. I hope I was articulate enough in answering your question. https://developer.mozilla.org/en/docs/Web/CSS/border-radius

Thank You for your reply Justin. I have understood there is no differences between the 50% -100% on the apperance. Actually I would like to learn Is there any resaon for using 100%. For example, is there any relationship between % of radius and padding or margin or something else. I got it is not a big deal but if there is a relationship I like to know :).

cool..nice explanation..Thank You.

Thanks for this! Much better explained there!