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

Question

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?

Ravioli

People use these tricks for make CSS shapes all the time. No worries so far. css-tricks.com/examples/ShapesOfCSS – Inmate

@Diodeus In all those examples, they aren't exceeding the dimensions of the element with the border-radius. Frshca is asking if exceeding the dimensions is okay. – Wet

Answer 1

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

Sandeesandeep

note that all values above 50% will be equivalent to 50% - I don't agree with this. – Amalea

@Amalea What don't you agree with about it? – Sandeesandeep

This != this – Amalea

@Amalea Ah, but this === this. I'll clarify – Sandeesandeep

The difference between the results of border-radius: 50% and border-radius: really-high-pixel-value is an artifact of the algorithm used for reducing overlapping border curves. – Snorkel

Answer 2

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.

Sardine