Hi everyone 👋 I built hyperellipse because I wanted to use the new CSS corner-shape property in production, but today it's only available in Chromium-based browsers. Safari and Firefox simply ignore it, which makes it difficult to adopt for real projects. hyperellipse provides a spec-accurate fallback for corner-shape, including squircles, superellipses, scoops, and notches. The goal was to make the same CSS work everywhere while preserving geometry as closely as possible to the native implementation. Features: • Native rendering in Chromium when available • Spec-accurate fallback for Safari and Firefox • SSR-friendly with no corner flash on hydration • Works with borders, outlines, shadows, and transitions • Framework-agnostic (React, Vue, Svelte, Next.js, etc.) The project is fully open source and I'd love to hear your feedback, ideas, or edge cases I may have missed. Thanks for checking it out! 🙌

hyperellipse

CSS corner-shape polyfill for Safari and Firefox

CSS corner-shape polyfill for Safari and Firefox