What Can We Actually Do With corner-shape? | CSS-Tricks

"When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when border-radius came onto the scene, I remember everybody thinking that it was the best thing ever. Web designs were very square at the time, so to have border-radius was super cool, and it saved us a lot of time, too."

"We're much less excited about rounded corners nowadays. In fact, sharp corners have made a comeback and are just as popular now, as are squircles (square-ish circles or circle-y squares, take your pick), which is exactly what the corner-shape CSS property enables us to create (in addition to many other cool UI effects that I'll be walking you through today)."

"At the time of writing, only Chrome 139 and above supports corner-shape, which must be used with the border-radius property or/and any of the related individual properties (i.e., border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius): These snipped corners are becoming more and more popular as UI designers embrace brutalist aesthetics. In the example above, it's as easy as using corner-shape: bevel for the snipped corners effect and then border-bottom-right-radius: 16px for the size. corner-shape: bevel; border-bottom-right-radius: 16px;"

Rounded corners originally required multiple background images or image sprites, so border-radius greatly simplified design and saved time. Older implementations required vendor prefixes such as -khtml-border-radius for legacy browsers. Modern aesthetics now include sharp corners, squircles, bevels, and snipped corners. The corner-shape CSS property enables these varied corner styles when used alongside border-radius and its individual corner properties. Browser support for corner-shape is currently limited to Chrome 139 and above. Practical uses include brutalist snipped corners, slanted sections for non-rectangular layouts, and cyberpunk-inspired corner treatments. Each border radius has horizontal and vertical semi-major axes.

Read at CSS-Tricks