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.
If you want predictable results, pair corner-shape with a regular border-radius fallback and gate advanced shapes with @supports (corner-shape: bevel). That way, older browsers keep the rounded version while capable browsers get the sculpted corners.
Try it on small components first: buttons, tags, and cards. Big radii with aggressive shapes can reduce readable surface area, so test with long labels and tighter mobile widths.
Use corner-shape as a brand accent, not as a global default. Keep border-radius as your base token, then apply custom corner geometry to decorative surfaces like cards and badges where browser fallback remains graceful.
Use corner-shape as a brand accent rather than a default everywhere. Keep border-radius as baseline, then apply custom geometry on selected components where fallback to rounded corners still looks intentional.
Media-related CSS needs testing across different asset ratios and resolutions. Real image variance is where composition rules are truly validated.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!