Tools
Border-Radius Generator
Round all four corners at once, or fine-tune each one, and copy clean
border-radius CSS. Switch between pixels and percent for pill shapes and blobs.
Your browser does not draw corner-shape yet, so the preview stays round. That is exactly what your visitors on the same browser will see, and nothing breaks.
About border-radius
One property, four corners. The shorthand reads clockwise from the top-left:
border-radius: TL TR BR BL. Equal values give a uniform round; mismatched values create tickets,
tabs and speech bubbles. Use % for shapes that scale with the box: 50% turns a
square into a circle and a wide box into a pill.
corner-shape: the curve, not the size
border-radius decides how much of the corner is rounded. corner-shape decides what
the rounding looks like: the continuous squircle of an app icon, a straight bevel,
an inward scoop, a square notch, or any point between them with
superellipse(k). Its browser status is the badge beside the control, read from the dataset
when this page was built. It is safe to add today whatever that badge says, because the fallback is free:
a browser that does not know the property skips the line and draws the ordinary round corner.