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

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