Using CSS Border Borders is much larger than element sizes

Question

Is there a problem using border-radius that is much larger than the size of the element?

For example, if I wanted to make a .circle class as follows:

 .circle { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; } 

So now I can apply this class to any element to make it a circle, for example:

 <img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc"> 

I know that so far I have not encountered any problems, but am I just setting myself up for new problems in the future?

Answer 1

There is no problem. You can apply the class wherever you want, no problem. Elements smaller (height or width smaller) 2000px will become a circle, elements larger (height or width larger) 2000px will not become circles, but will retain their original shapes, but basically rounded corners.

This was shown in W3 here :

"If any horizontal radius is greater than half the width of the window, reduced to this value. If any vertical radius is greater than half the height of the box, it is reduced to this value. (There are four horizontal and four vertical radii.) This is a simple algorithm, as it looks at each radius independently of all others, but it prohibits possibly useful borders that combine large and small radii, and this can turn quarter circles into ellipses of quarters. " border-radius property documentation

I should mention that you can use percent as a value, 50% is the maximum that the circle will create if the element is a square initially. If the item is not a square, it will create an ellipse.

Also note that all values ​​above 50% will be equivalent to 50% when applied to all corners (for example, the abbreviated border-radius:50% , which applies it to each corner). As juutler483 noted in the comments, if it applies to individual corners, 50% is not the same as 100% because of how they fit together. Instead, all values ​​above 100% are equivalent to 100%.

It is 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.