The Future of CSS

CSS has seen major improvements over the past few years, thanks to the collaborative effort of major browser vendors and organizations like Interop. One of the most successful outcomes is CSS Subgrid, a powerful extension to CSS Grid that enables new layouts. It was implemented in Firefox in 2019, but gained widespread support across all modern browsers by the end of 2023 when it was added to Interop 2023.

As we approach the end of 2026, Interop 2027 is being planned. Mozilla has created a ranking system for web features to include in the next year, and I have voted for the top 10 features I’m eager to see. Among these, adding functions to CSS, border-radius property variations, corner-shape, and border-shape are particularly exciting.

The proposal to add functions to CSS would allow us to define new functions with @function and specify the returned value with result. This feature could make converting between polar and cartesian coordinates, a common task in my Whimsical Animations course, much easier. Although it’s already implemented in Chromium browsers, its inclusion in Interop 2027 would make it widely available sooner.

The border-radius property already rounds off the edges of DOM nodes, creating rounded rectangles. However, the corner-shape property offers alternative ways to connect the four sides of these nodes, with options like squircle. While I find corner-shape: bevel particularly useful for creating video game or sci-fi UIs, this property isn’t yet available in Firefox or Safari. If added to Interop 2027, I believe it’s reasonable to start using it today, as it's a perfect example of progressive enhancement.

Another intriguing proposal is border-shape, which allows for creating custom border shapes using straight lines, arcs, and Bézier curves. This property changes the element’s actual border box, ensuring that borders, outlines, and box-shadows correctly follow the altered corner shapes. I used border-shape recently to create a card with a big circular scoop at the top, achieving a unique design effect.