You can now shape corners in CSS. Not just round them.
Meet corner-shape.
border-radius only changes how much rounding you get. corner-shape changes the geometry of the corner itself.
Same element. Same radius. Different corner style.
Square. Rounded. Scoop. Bevel. And more.
This matters because corners carry tone. They can feel softer. Or sharper. More designed. More intentional.
Great for buttons, cards, and UI chrome.
Browser support is the catch. Around 68.65% today. No Safari. No Firefox.
So it’s not for critical UI yet. But it works well as progressive enhancement.
Unsupported browsers simply fall back to normal corners. No breakage. No hacks.
CSS is slowly giving us more control over geometry. Less SVG. Fewer pseudo-elements. More design system power.
To learn more tips about CSS, make sure to join my newsletter below ❤️