Can someone explain border-radius?
html - Using a CSS border-radius much larger than an elements dimensions - Stack Overflow
Border-radius % or px?
How to make a fancy inverted border radius in CSS
Videos
So, I've been doing some CSS challenges and they have some interesting forms, curves, overlapping elements and so on. I got the hang of them after a while, but by far, my biggest problem is with border-radii. I cannot understand how this works.
Yes, it makes rounded corners, but how it works, radius of what? And why I can give 10000000px and be the same computed value as 100px. Why it has 8 values?
There is no issue here at all. You're free to apply the class wherever you'd like, no issues really. Elements smaller than (height or width is less than) 2000px will become circles, elements larger than (height or width is more than) 2000px will not become circles, but rather stay their original shapes but have largely rounded corners.
This was brought up in W3 here:
"If any horizontal radius is larger than half the width of the box, it is reduced to that value. If any vertical radius is larger than half the height of the box, it is reduced to that value. (There are four horizontal and four vertical radii.) This is an easy algorithm, because it looks at each radius independently of all others, but it disallows possibly useful borders that combine large and small radii and it may turn quarter circles into quarter ellipses." - The documentation of the
border-radiusproperty
I should mention that you can use percents as a value, 50% being the max that will create a circle given the element is a square originally. If the element is not a square then it will create an ellipse.
Also note that all values above 50% will be equivalent to 50% when applied to all corners (like the shorthand border-radius: 50% which applies it to each corner). As jbutler483 pointed out in the comments, if it is applied to individual corners, 50% is not the same as 100% because of how they combine with each other. Instead all values above 100% are equivalent to 100%.
It's also important to note that something like border: 50% and border: really-high-pixel-value can have different effects if the element is not square.
Also of note, you can use the CSS constant of infinity if you want to set a really high pixel value (you have to use calc(infinity * 1px)).
This was W3 CSS issue-29, which was resolved following option 3 in the issue as documented in the spec.
If any adjacent border radii are so large that they intersect, then all border radii are reduced proportionally so that none intersect.
In the particular case that all four radii are the same on a square element, and the radii are larger than half of the box dimensions, they get reduced to half of the width/height so that they end up forming a circle.
Just taken over some CSS from another company and I came across "border-radius: 10000px;" to get a circle effect. I've always used "border-radius: 50%;" to get the same effect. Is there any reason they might have used 10000px? Unfortunately I can't get in touch with the previous devs.
Cheers!