.microsoft {
"border-radius": 0;
}

.apple {
"border-radius": 20%;
}

Percentage border radiuses is stupid.

@M1sf3t please give an example.

@M1sf3t I'm generalizing, but in the case that you want rounded UI elements, percentage border radius looks more like a stretched image than anything else. But I'm assuming this is supposed to be CSS, but I now realize that that isn't even valid CSS.

EDIT: For clarification: https://jsfiddle.net/mu0Lj29f/1/

Not sure and not tried, but applying 50% radius to an image of unknown size to get it to look like a circle could probably be a usecase.

Using percentage border-radius is really stupid idea, unless you know that the element will have exactly 1:1 width to height ratio. Otherwise you will end up with ugly looking ellipse-like corners.

@M1sf3t I'm not sure why would someone even consider using vh or vw for corner radius :D Those units are meant to be used for layout, not for element styling. Using rem or px is all you really need, and you don't have to have fixed aspect ratio, which is also stupid idea which won't work accross devices.

@M1sf3t Do you want it to scale with the element size? Might be a bit tricky without some javascript :)

@LinusCDE Works if the image is square. Else, just using something like 999999px works just fine!

Does a mind fuck with border radius vw or vh XD

@M1sf3t If you keep the proportions you should be fine :) But if you don't need the corners to scale px is the easier choice

Y'all arguing about the border radius percentage but don't even talk about his properties being in quotes

@M1sf3t 1000px is better

@M1sf3t I fully understand. I‘ve been through this thought and I‘d argue accuracy for perfect circle is more important than an 16K Screen that we may or may not have in years where the unit is no longer sufficient.

Because there is still dpi scaling, that shouldn’t be too much of a problem. In a good architecture, it also shouldn’t be hard to fix, in case the problem does occour.

Of course, bigger circles need higher values, I think 1000px is a reasonable balance for 99% of all cases and don’t waste too much bytes.

A good designer will also spot a 1px off circle, which is harder to spot if it’s an oval and not a perfect circle.

.me {

background-color: #008080;

}

.me:hover {

background: linear-gradient(#009090, #00a0a0);

}

EDIT: why did it put new lines between my code?