Just wanted to shout out this cool new feature coming to CSS: you can now specify exactly how round you want your border-radii to be.
A normal radius would look like this:
The border corners are just arcs of circles. This is what the new property looks like:
corner-shape : notch; /* or superellipse(-infinity) */
corner-shape : scoop; /* or superellipse(-1) */
corner-shape : bevel; /* or superellipse(0), a straight line */
corner-shape : round; /* or superellipse(1), default. */
corner-shape : squircle; /* or superellipse(2) */
corner-shape : square; /* or superellipse(infinity) */
/* You can also specify each corner separately. */
corner-shape : square squircle bevel scoop; /* top-left, top-right, bottom-right, bottom-left */
Lined up, they look like this:
corner-shape.
corner-shape. A rendered image is provided.
You might want to use this effect for mimicking an iOS-style squircle, since previous ways of doing this had to use SVG masks (Here's the CodePen.) If you want to see more interesting ways of using this new feature, see CSS-Tricks article about it. (I think we might have a good replacement for the classic CSS Triangle!)
Further Reading
corner-shape(MDN)- This page has a good example that demonstrates this property.
superellipse()(MDN)- What Can We Actually Do With corner-shape? (CSS-Tricks, mentioned above)