290 of 300

Platform 04

Continuous corners

Both shapes have the same 20 px border-radius; the second adds corner-shape: superellipse(k), which draws each corner as |x|^n + |y|^n = 1 with n = 2^k, so k = 1 is round and k = 2 is squircle.

From the Engineering page on ramtt.com

  • Above k = 1 the curvature starts at zero where the straight edge ends and grows gradually, so the edge runs into the corner without the jump in curvature a circular arc has.
  • The magnifier draws both curves from that formula at 6× or more, and the formula matches Chrome's rendered corners to within 0.06 px on a 100 px radius.
  • At the same radius a superellipse cuts less of the corner: at k = 2 it removes 34 % of the area a round corner removes, so it needs about 1.7× the radius to look as round.