Web Platform Accelerates: New CSS `corner-shape` and WebGPU's Game-Changing AI & Graphics Capabilities

The web platform continues its rapid evolution with two notable additions: the new CSS corner-shape property and the groundbreaking WebGPU API.

CSS receives a significant update with the introduction of corner-shape, a property designed to extend and enhance the functionality of border-radius. This new capability allows developers to implement more sophisticated corner geometries, moving beyond simple circular rounding. Supported shapes include squircles (reminiscent of Apple’s iconic designs), beveled, rounded notches, square notches, and a flexible superellipse() function for custom curves. This aims to simplify the creation of complex UI elements, reducing reliance on workarounds. Currently, corner-shape is supported across Chromium-based browsers (Chrome, Edge, Opera, Brave), with a graceful fallback to standard border-radius where not yet implemented.

Beyond aesthetics, the web is gaining unprecedented computational power through WebGPU, a new API that provides web applications with 100% direct access to the client’s graphics processing unit. This unlocks capabilities previously limited to native applications, enabling high-performance 3D graphics—including potential for AAA gaming experiences directly in the browser. Crucially, WebGPU also accelerates on-device artificial intelligence and machine learning model execution. It has achieved widespread support across all major browsers, including Chrome, Edge, Firefox, and Safari. The ecosystem is rapidly adopting WebGPU, with libraries like Three.js, React Native, PlayCanvas, and Babylon.js already integrating it, and Unity expected to follow. For AI, WebGPU powers libraries such as ONNX Runtime and Transformers.js, facilitating rapid, client-side inference for tasks like background removal, real-time image captioning, and speech transcription/translation—all executed locally in the browser with minimal latency and enhanced privacy.

Further boosting on-device AI capabilities, Google recently announced litrt.js, a new library designed to streamline the execution of AI models in the browser. litrt.js simplifies the model pipeline by reducing the number of conversion steps and supports model quantification for optimized performance. It leverages WebGPU for substantial speed improvements, demonstrated by an image upscaler model that processes in 300ms with WebGPU compared to 1.3 seconds with WebAssembly. This library offers a growing collection of pre-optimized models on platforms like Kaggle and Hugging Face, positioning it as a powerful, performant alternative to existing solutions like Transformers.js, as highlighted at a recent Web AI conference.