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 trialUtku Orçun Gezici
2,390 Pointsborder-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
Justin Farrugia
13,649 PointsHey 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
Utku Orçun Gezici
2,390 PointsJustin Farrugia
13,649 PointsThanks for this! Much better explained there!
Utku Orçun Gezici
2,390 PointsUtku Orçun Gezici
2,390 PointsThank 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 :).
abhi agar
Courses Plus Student 129 Pointsabhi agar
Courses Plus Student 129 Pointscool..nice explanation..Thank You.