How to make a soft square radius?

Question

css

Hello everyone, can you please tell me how to achieve such a shape for an icon using rounding or mathematics?

Answer 1

If suddenly it’s still relevant, then the figure is called squircle, on the droider show channel there is a full description about it and a mat function how to display it https://youtu.be/GuFJTPf13RU

Answer 2

Hey! the border-radius property is sufficient for this. Here https://developer.mozilla.org/ru/docs/Web/CSS/bord... documentation with examples of how to do something similar. You just have to choose the right numbers for your case.
-----
I've been corrected below. I agree with this that through the border-radius 1 to 1 can not be done. A simple option would be the dock's mask-image property: https://developer.mozilla.org/en-US/docs/Web/CSS/m...
PS Browser support is good, interactive allows you to take into account even without strange polygons :)

Answer 3

It's an ellipse! There is an ellipse plot function.