Excited for the design potential of the CSS Corner Shape
Posted: August 02, 2026
I'm super stoked for CSS Corner Shape! A few years ago I stumbled on this 2013 talk on YouTube from Lea Verou about the humble border radius where towards the end of the talk she discusses the future of the border radius and a property called 'border-corner-shape'.
THIS is something that I've wanted since I first started making websites (circa 2006)! But it seemed like that possible border-corner-shape was destined to be never see a release because there wasn't enough interest ... until, that is, recently the popularity of the 'Squircle' shape from iOS7 seems to have generated renewed interest in the possibilities of a corner-shape property. I'm not all that excited about squircles per se, but the other possibilities fascinate me a lot..bevels/notch/scoop (and I guess the squircle too) have me feeling very curious about all the possibilities!
Here is an example I made of a link styled like wood with a rounded beveled edge as if I took a router to the edge of board (required Chromium-based browser to properly see desired effect):
See the Pen Round beveled edge using Scoop Corner Shape by Jonathan Huffman (@jonathan-huffman) on CodePen.
Since it's currently only available for Chromium-based browsers, I'll wait a bit before using it. But I'm very excited for this possibility, and once it's incorporated in Gecko(Firefox) and Webkit(Safari) -based browsers, I'll definitely be making use of it!
Further reading:
- Here is an article on CSS Tricks that goes into a lot of detail about the corner-shape property
- Dave Rupert has a good write up about the potential for Sci-fi rectangles using corner-shape
- And Smashing Magazine has a good summary here
- And here is an article I found specifically about the Superellipse aspect of corner-shape