Flexible Ellipses
border-radius
accepts different horizontal and vertical radii, if you use a slash to separate them:
border-radius
also accepts percentages - resolving to width and height, therefore same percentage can compute to different values!
border-radius: 50% / 50%;
= border-radius: 50%;
Half Ellipses
border-radius
is shorthand for:
border-top-left-radius/ border-top-right-radius/ border-bottom-right-radius/ border-bottom-left-radius
Quarter Ellipses
One corner is 100% rounded, the other three not: