How to create fancy corners using CSS corner-shape

CSS has quietly introduced a game-changing property that lets web developers create squircles—those trendy rounded squares popularized by modern app icons—with just one line of code. The new corner-shape property, currently supported in Chrome 139 and other Chromium browsers, works alongside the familiar border-radius to transform ordinary rounded corners into bevels, scoops, notches, and custom superellipse shapes without requiring SVGs or complex workarounds.

Developers can now craft everything from Cyberpunk-inspired interfaces with beveled edges to speech bubble tooltips and slanted sections using combinations like corner-shape: bevel or corner-shape: superellipse(2). The property accepts six keyword values plus a superellipse function that ranges from negative infinity for inward curves to positive infinity for sharp, nearly square corners.

While browser support remains limited to Chromium-based platforms for now, the creative possibilities are already proving endless. Designers are combining different corner shapes on single elements, layering notched elements inside bordered containers for "tech corners," and pushing the boundaries of what HTML elements can look like. The innovation signals a shift away from thinking of web elements as rigid squares, opening doors to more organic, visually striking interfaces that previously required elaborate CSS hacks or external graphics.