Rectangles with rounded corners are mathematically wrong. Once you know why, you can’t unsee it. Squircles, made iconic by Apple, are finally supported in browsers by the new CSS corner-shape: squircle property. I will show you how to approximate one squircle corner with just three pixel-perfect Bézier curves, so you can use squircles everywhere: canvas, SVG, clip-path, and even game engines. Your eyes deserve curves that actually make sense.
Remember when we made the same mistake with Internet Explorer in the early 2000s? Let’s go ahead and learn nothing from that.