Search code examples
htmlcssdomcss-shapes

Using a CSS border-radius much larger than an elements dimensions

Is there any issue with using a border-radius that is much larger than an element's dimensions?

For example, if I wanted to make a class .circle like so:

.circle {
    border-radius: 1000px;
}

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

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

I know I haven't run into any issues so far, but am I just setting myself up for more issues down the road?

Solution

  • 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-radius property

    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)).