The evolution of web styling is increasingly driven by 'Interop,' a collaborative project involving major browser vendors like Google, Apple, Microsoft, and Mozilla. The goal of Interop is to ensure universal browser support for new web technologies. A successful example of this collaboration is CSS Subgrid, which saw near-100% support across modern browsers within a year of being added to the Interop roadmap. As the industry prepares for Interop 2027, developers are beginning to see a preview of the next generation of CSS capabilities.

A line graph showing the rapid increase in CSS Subgrid browser support throughout 2023.
The rapid adoption of CSS Subgrid demonstrates the success of the Interop project in achieving universal browser support.www.joshwcomeau.com

This graph illustrates the successful collaboration between browser vendors to implement CSS Subgrid, which saw near-100% support within a year.

One of the most significant shifts involves the introduction of CSS functions. Similar to JavaScript, these functions allow developers to define custom logic, such as converting polar coordinates to Cartesian coordinates for complex animations. Another major advancement is the expansion of shape capabilities beyond standard rounded corners. The proposed `corner-shape` property introduces options like 'squircle' (using superellipse algorithms), 'bevel' (45-degree diagonal corners), and 'notch' or 'scoop' cutouts. Unlike previous methods using `clip-path`, these properties actually modify the element's border-box, ensuring that borders, outlines, and box-shadows correctly follow the new shapes.

Five boxes demonstrating different corner shapes including round, squircle, bevel, notch, and scoop.
The proposed corner-shape property introduces diverse geometric options like squircles and beveled edges.www.joshwcomeau.com

The proposed corner-shape property introduces options like 'squircle', 'bevel', and 'notch' or 'scoop' cutouts.

A green card with squircle-style corners and a circular cutout tracing the bottom of a gold coin.
A practical example of the new corner-shape properties applied to a UI element with a complex cutout.www.joshwcomeau.com

Unlike previous methods using clip-path, these properties actually modify the element's border-box, ensuring that borders, outlines, and box-shadows correctly follow the new shapes.

Further improvements target layout and accessibility. The 'Level 2' Anchor Positioning API will include new container queries to detect if a target element (like a tooltip) has flipped to a fallback position, allowing for more precise UI adjustments. Additionally, a proposed `reading-flow` property aims to align the tab order of elements with their visual order in complex grid or flexbox layouts, a significant win for users relying on assistive technologies. While some features like the `inherit()` function remain in early proposal stages, these developments signal a move toward a more programmatic and geometrically flexible CSS environment.